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 相关文章推荐
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jquery常用操作小结
Jul 21 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
微信小程序反编译的实现
Dec 10 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
php数组编码转换示例详解
2014/03/11 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
AngularJS 控制器 controller的详解
2017/10/17 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
python+pygame简单画板实现代码实例
2017/12/13 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
UDP协议功能
2013/01/06 面试题
中学生团员自我评价分享
2013/12/07 职场文书
给女朋友的道歉信
2014/01/10 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
请假条格式范文
2014/04/10 职场文书
开学典礼策划方案
2014/05/28 职场文书
社区矫正工作方案
2014/06/04 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
普通员工辞职信范文
2015/05/12 职场文书
golang日志包logger的用法详解
2021/05/05 Golang