事件委托是什么
把若干个节点上的相同事件的处理函数event listener绑定到它的父节点上去, 在父节点上统一处理，减轻对event listener的管理负担。
为什么要有事件委托
1.监听还不存在的元素或者已经存在的元素
2.减少监听器的个数
如何做到事件委托
1 | <body> |
2 | <button id="xxx">取号</button> |
3 | <ul> |
4 | <li> |
5 | <ol id="yyy"></ol> |
6 | </li> |
7 | </ul> |
8 | <script> |
9 | let button = document.querySelector("#xxx"); |
10 | let yyy = document.querySelector('#yyy'); |
11 | button.addEventListener('click',function(){ |
12 | let number = parseInt(Math.random() * 100, 10); |
13 | let li = document.createElement('li'); |
14 | let span = document.createElement('span'); |
15 | span.textContent = number; |
16 | li.appendChild(span); |
17 | yyy.appendChild(li); |
18 | }); |
19 | yyy.addEventListener('click',function(e){ |
20 | let element = e.target; |
21 | while(element.tagName !== "LI"){ |
22 | if(element === yyy){ |
23 | element = null; |
24 | break; |
25 | } |
26 | element = element.parentNode; |
27 | } |
28 | element && element.remove() |
29 | }) |
30 | </script> |
31 | </body> |
用户先点击取号，再点击li元素或者span元素时，就执行ol元素的监听事件，把点击的li元素或span元素删除，不用监听每个元素，监听它们的父元素即可。