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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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 dirname()与__FILE__常量的应用
2013/06/24 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
简单了解Django模板的使用
2017/12/20 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
使用Python实现批量ping操作方法
2020/05/06 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
迟到检讨书大全
2014/01/25 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL