JS事件委托怎么理解,能够解决什么问题
Admin 2022-06-18 群英技术资讯 423 次浏览
1、每个函数都是对象,占用内存。内存中的对象越多,性能越差。解决事件处理过多问题的办法是事件委托。
2、事件委托冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
<ul id="myLinks"> <li id="myLi1">text1</li> <li id="myLi2">text2</li> <li id="myLi3">text3</li> </ul>
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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
使用typescript类型实现ThreeSum 目录 前言 思路整理 实现TwoSum 实现减法 元祖中是否包含差值 递归元组 测试 实现ThreeSum 实现排序 实现ThreeSum 测试 前言 本文执行环境typescript,版本4.7.4 不使用typescript的计算能力,通过类型来实现ThreeSum 思路整理 实现ThreeSum之前我们先降低下难度,实现TwoSum,因为TwoSum可以作为ThreeSum的基础泛型 TwoSum需要准备什么呢? 递归元组,模拟for循环 减法,递归过程中求出差值 对每一项差值判断是否存在
newArray(arg1,arg2,…),当参数长度为0或大于等于2时,传入的参数将依次成为新数组的第0至第N项。newArray(len),当len不是数值时,返回一个只包含len元素的数组。
这篇文章主要为大家详细介绍了JavaScript实现点击图片翻转效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在实际项目中,设置时间范围的功能还是比较常见的,在很多数据多,需要做筛选的场景都应用,那么我们实现设置时间范围的功能有什么方法呢?本文给大家分享用JS实现设置时间范围的功能,感兴趣的朋友就继续往下看吧。
这篇文章主要为大家详细介绍了JavaScript canvas实现文字时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008