js中事件对象和事件委托的介绍


Posted in Javascript onJanuary 21, 2019

js中事件对象和事件委托的介绍

Ie9以下浏览器中的事件对象是放在全局中的window.event;

解决兼容性:event = event || window.event

事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变):

event.target(点击的目标对象)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    td{
      width: 100px;
      height: 100px;
      border:2px solid red;
    }
  </style>
</head>
<body>
<table >
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>
</body>
<script>
  var tab = document.getElementsByTagName("table")[0];
  tab.onclick = function (event) {
    //点击子级对象改变颜色
    event.target.style.backgroundColor = "black";
  }
</script>
</html>

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
JavaScript作用域链实例详解
Jan 21 #Javascript
Jquery的Ajax技术使用方法
Jan 21 #jQuery
js变量声明var使用与不使用的区别详解
Jan 21 #Javascript
Vue中Axios从远程/后台读取数据
Jan 21 #Javascript
vue项目中实现的微信分享功能示例
Jan 21 #Javascript
在vue项目中引入highcharts图表的方法
Jan 21 #Javascript
js的对象与函数详解
Jan 21 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
如何使用Strace调试工具
2013/06/03 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
详解python数据结构和算法
2019/04/18 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python流程控制语句的深入讲解
2020/06/15 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
外包公司软件测试工程师
2014/11/01 面试题
财务部出纳岗位职责
2013/12/22 职场文书
《影子》教学反思
2014/02/21 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
学校课外活动总结
2014/05/08 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
详解JS数组方法
2021/11/20 Javascript
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers