首页 > 其他 > 详细

事件委托(时间代理)初认识

时间:2017-02-27 21:20:21      阅读:191      评论:0      收藏:0      [点我收藏+]

基本思路:

  冒泡机制+target(时间真正触发者)即理解为:

  借助e.target和冒泡机制把事件绑定在父元素之上,事件由父元素来监听,由子元素来触发

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <ul>
 9     <li class="li">li1</li>
10     <li>22</li>
11     <li class="li">33</li>
12     <li>44</li>
13     <li class="li">55</li>
14 </ul>
15 
16 
17 <script>
18     var ul=document.getElementsByTagName(ul).item(0);
19     ul.onclick=function (e) {
20         if(e.target.className.indexOf(li)>-1){//这里只是做了一个简单的操作,只检测li;若出现lii;lii;lia等元素,则需要拆分元素进行细节上的判断
21             e.target.style.color=pink;
22         }
23     };
24 </script>
25 
26 </body>
27 </html>
技术分享
 效果图 

即使在JS中加入如下代码同样能有实现点击效果

1     var newLi = document.createElement(‘li‘);
2     newLi.className = ‘li‘;
3     newLi.innerHTML = ‘li7‘;
4     ul.appendChild(newLi);

与传统写法的比较:

 1 <script>
 2     var li = document.getElementsByClassName(li);
 3      var ul = document.getElementsByTagName(ul).item(0);
 4      for (var i = 0; i < li.length; i++) {
 5          li[i].onclick = function () {
 6          this.style.color=red;
 7          }
 8      }
 9     var newLi = document.createElement(li);
10          newLi.className=li;
11          newLi.innerHTML=li7;
12          ul.appendChild(newLi);
13 </script>

  传统写法虽然同样能够实现效果,但有多少个元素就需要绑定多少次事件,很消耗性能。并且for遍历的是死的类名,无法将事件绑定给后添加的元素;事件委托则在绑定事件上仅一步操作,未来添加的元素不论有多少同样能够具有之前的事件。

事件委托(事件代理)优点:

(1)性能上的优化;

(2)后添加额元素也可以执行之前的绑定函数

(3)后期优化是经常会用到,比较重要。

end

 

事件委托(时间代理)初认识

原文:http://www.cnblogs.com/ilaozhao/p/6475939.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!