js事件委托(事件代理)

【以下內容為自己的理解,如有不同觀點,請留言指導,感謝】

作用:

1 在異步操作DOM節點經常得使用。(即節點後渲染)
2 大大優化程序代碼量。

舉例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生 javascript 的事件委托</title>
</head>
<body>
<p>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</p>
<button onclick="addNode()">新增節點</button>

<script>
var li = document.getElementsByTagName('li');
var ul = document.getElementsByTagName('ul');
var index = 0;

for (var i = 0; i < li.length; i++) {
    li[i].style.padding = '20px';
}

ul[0].onclick = function (e) {
    //window.event.srcElement為兼容IE瀏覽器
    var target = e.target || window.event.srcElement;
    console.log(target.innerHTML);
};

function addNode() {
    index++;
    var liElement = document.createElement('li');
    liElement.innerHTML = index + ' - hello world';
    ul[0].appendChild(liElement);
}
</script>
</body>
</html>

原理:通過事件冒泡法原理,通過監聽父元素的事件源統一管理所有子孫元素的事件。

好處:
1 不用綁定每個子孫元素。
2 後插入的節點,依舊可以被監聽。(之前犯過:因為在setTimeOut()裡面進行插入節點,導致事件無法監聽,後利用委托事件解決)。


發佈留言