基本思路:
冒泡机制+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