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的tab切换 js原理
Apr 01 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Sanic框架流式传输操作示例
2018/07/18 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python wordcloud库安装方法总结
2020/12/31 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
高中数学教师求职信
2013/10/30 职场文书
白酒市场开发计划书
2014/01/09 职场文书
安全资金保障制度
2014/01/23 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书