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实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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配置文件中最常用四个ini函数
2007/03/19 PHP
PHP循环获取GET和POST值的代码
2008/04/09 PHP
劣质的PHP代码简化
2010/02/08 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php实现分页工具类分享
2014/01/09 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python实现多层感知器
2019/01/18 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
python3 使用traceback定位异常实例
2020/03/09 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
小学生期末自我鉴定
2014/01/19 职场文书
党员教师工作决心书
2014/03/13 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
文体活动总结
2015/02/04 职场文书
详解Nginx 工作原理
2021/03/31 Servers
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python