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传值 判断
Oct 26 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 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处理复杂xml数据示例
2016/07/11 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
在django view中给form传入参数的例子
2019/07/19 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
百联网上商城:i百联
2017/01/28 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
租房协议书
2014/04/10 职场文书
投资协议书范本
2014/04/21 职场文书
小学三年级学生评语
2014/04/22 职场文书
人大调研汇报材料
2014/08/14 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
专家推荐信怎么写
2015/03/25 职场文书
中学推普周活动总结
2015/05/07 职场文书
Django框架中表单的用法
2022/06/10 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android