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自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
js实现滑动进度条效果
Aug 21 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 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 getsiteurl()函数
2009/09/05 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
《会变的花树叶》教学反思
2014/02/10 职场文书
岗位廉政承诺书
2014/03/27 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
企业负责人任命书
2014/06/05 职场文书
图书馆标语
2014/06/19 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
保研导师推荐信
2015/03/25 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript