js中的事件委託

事件委託(event delegation)應該也是JS中比較火的一項技術.使用事件委託技術能避免對特定的每一個節點添加事件監聽,相反,事件監聽器是被添加在他們的父元素上.

什麼是事件委託

事件委託也稱事件代理,不是自身元素觸發的事件而是利用其餘元素來觸發事件實現效果.利用冒泡來實現.

代碼解析

<ul id="ul1">
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
    <li>11111</li>
</ul>

通常狀況下,咱們爲li綁定onclick事件,以下:

var oUl = document.getElementById('ul1');
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
    aLi[i].onclick = function(){
        this.style.background = 'red';
    };

可是這種狀況有個很差處,就是當咱們向ul中動態添加li節點時,添加後的li是沒有onclick事件的,,這是很是糟糕的事情.

1. 事件委託寫法

var oUl = document.getElementById('ul1');
oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement; // 事件源
    if(target.nodeName.toLowerCase() == 'li' ){
        target.style.background = 'red';
    }
};

使用事件委託這種寫法,有效的解決了上面那種寫法產生的問題.

總結

1. 提升性能(事件委託中並無使用循環)

2. 後續添加的節點能夠直接擁有事件行爲