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核心支持代码分享
May 23 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
详解Javascript继承的实现
Mar 25 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
angular2中Http请求原理与用法详解
Jan 11 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python pass详细介绍及实例代码
2016/11/24 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
想学画画?python满足你!
2020/12/24 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
酒店保洁主管岗位职责
2013/11/28 职场文书
会计做账心得体会
2016/01/22 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL