事件委托是什么
把若干個(gè)節(jié)點(diǎn)上的相同事件的處理函數(shù)event listener綁定到它的父節(jié)點(diǎn)上去, 在父節(jié)點(diǎn)上統(tǒng)一處理，減輕對(duì)event listener的管理負(fù)擔(dān)。
為什么要有事件委托
1.監(jiān)聽(tīng)還不存在的元素或者已經(jīng)存在的元素
2.減少監(jiān)聽(tīng)器的個(gè)數(shù)
如何做到事件委托
<body>
<button id="xxx">取號(hào)</button>
<ul>
<li>
<ol id="yyy"></ol>
</li>
</ul>
<script>
let button = document.querySelector("#xxx");
let yyy = document.querySelector('#yyy');
button.addEventListener('click',function(){
let number = parseInt(Math.random() * 100, 10);
let li = document.createElement('li');
let span = document.createElement('span');
span.textContent = number;
li.appendChild(span);
yyy.appendChild(li);
});
yyy.addEventListener('click',function(e){
let element = e.target;
while(element.tagName !== "LI"){
if(element === yyy){
element = null;
break;
}
element = element.parentNode;
}
element && element.remove()
})
</script>
</body>
用戶先點(diǎn)擊取號(hào)，再點(diǎn)擊li元素或者span元素時(shí)，就執(zhí)行ol元素的監(jiān)聽(tīng)事件，把點(diǎn)擊的li元素或span元素刪除，不用監(jiān)聽(tīng)每個(gè)元素，監(jiān)聽(tīng)它們的父元素即可。
