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 相关文章推荐
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
js取模(求余数)隔行变色
May 15 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 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 Hex RGB颜色值互换的使用
2013/05/10 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python下载网络小说实例代码
2018/02/03 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
Android笔试题总结
2014/11/29 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
怎么写好自荐书
2014/03/02 职场文书
村干部承诺书
2014/03/28 职场文书
停水通知
2015/04/16 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
Python软件包安装的三种常见方法
2022/07/07 Python