高性能 javaScript 之事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

Irene1991

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量316

点赞数

分类专栏：学习笔记文章标签： javascript

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/Irene1991/article/details/104699565

版权

学习笔记专栏收录该内容

27 篇文章 1 订阅

订阅专栏

开卷有益，做一个精益求精的开发者！

事件委托

使用前提：当页面存在大量元素，且每个元素都要一次或多次绑定事件（如点击事件）。

使用原因：事件绑定占用处理时间，浏览器会跟踪每个事件处理，会占用更多内存。

解决办法：使用事件委托。

示例代码：

<!DOCTYPE html>
<html>
<head>
   <title>事件委托</title>
   <style>
       div{
           border:1px solid #999;
           padding:20px;
       }
       div.box{
           width:100px;
           height:100px;
           line-height: 100px;
           cursor: pointer;
           background: #ccc;
           margin:10px;
           color:#f7f7f7;
           text-align: center;
       }
   </style>
</head>
<body>
   <div id="root" class="root">
       <div class="box click3">click3事件</div>

<div class="content">
<div class="box click2">click2事件</div>

           <div class="article">
               <div class="box click1">click1事件</div>
           </div>
       </div>
   </div>

       function fn2(){
           console.log("您触发了click2事件！");
       };

       function fn3(){
           console.log("您触发了click3事件！");
       };

       //事件委托
       //避免了在所有需要绑定事件的元素上绑定事件处理，仅在其最外层元素上使用事件委托。
       document.getElementById("root").οnclick=function(e){
           console.log("事件委托");
           //浏览器兼容
           e = e||window.event;
           var target = e.target || e.srcElement;
           console.log(target);
           console.log(target.className);

           //先判断是哪个目标元素，再触发对应的事件。
           //注意按照冒泡规则确定判断顺序，先判断内层元素。
           //注意class有多个的情况。也可以用target.id,但不建议使用。
           if(target.className == 'box click1'){
               fn1();
           }else if(target.className == 'box click2'){
               fn2();
           }else if(target.className == 'box click3'){
               fn3();
           }else{
               //没有符合的目标元素，退出。
               return
           }
       }
</script>
</body>
</html>

测试

数字为点击顺序

Irene1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
高性能 javaScript 之事件委托

开卷有益，做一个精益求精的开发者！事件委托使用前提：当页面存在大量元素，且每个元素都要一次或多次绑定事件（如点击事件）。使用原因：事件绑定占用处理时间，浏览器会跟踪每个事件处理，会占用更多内存。解决办法：使用事件委托。示例代码：<!DOCTYPE html><html><head> <title>事件委...
复制链接

扫一扫