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 .tmpl(), .template()学习资料小结
Jul 18 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
js中日期的加减法
2015/05/06 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
出国留学介绍信
2014/01/13 职场文书
校园绿化美化方案
2014/06/08 职场文书
实验室的标语
2014/06/20 职场文书
化学教育专业求职信
2014/07/08 职场文书
个人工作年终总结
2015/03/09 职场文书
师范生教育见习总结
2015/06/23 职场文书
运动员入场前导词
2015/07/20 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
python库sklearn常用操作
2021/08/23 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL