JS事件委托的原理和應用 - pssp－IT工程師數位筆記本

文章出處

　　js事件委托也叫事件代理，實際上事件委托就是通過事件冒泡實現的，所謂的事件就是onclick，onmouseover，ondown等等，那么委托呢？委托就是指本來這個事是要你自己做的，但是你卻讓別人幫你完成這個事，這就叫事件委托。

　　那么為什么需要事件委托？我們先看一段代碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
<script>

var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
    li[i].onmouseover = function(){
        this.style.backgroundColor = "red";
    }
    li[i].onmouseout = function(){
        this.style.backgroundColor = "";
    }
}

</script>
</body>
</html>

出現的問題1、我們現在的做法是給最具體的元素添加onmouseover事件，這樣的話，我們有多少個元素就要循環綁定多少次，嚴重消耗性能。

如果你這還不覺得沒有什么事的話，那么再看一個問題。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <button id="btn">添加</button>
    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>

<script>

var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
    li[i].onmouseover = function(){
        this.style.backgroundColor = "red";
    }
    li[i].onmouseout = function(){
        this.style.backgroundColor = "";
    }
}
var btn = document.getElementById("btn");
btn.onclick = function(){
    var createLi = document.createElement("li");
    createLi.innerHTML = "我是新添加的li";
    ul.appendChild(createLi);
}

</script>
</body>
</html>

　　發現沒有？我們后面添加的li卻沒有onmouseover事件，因為我們在創建這些li的時候，我們在創建這些元素的時候已經for循環完了，后面并沒有給后面創建的li添加事件，但是有很多時候我們確實需要在后來添加的元素也需要同樣的事件，那這顯然有些麻煩，但是我們用事件委托就好辦多了。

通過事件委托實現給每個li添加onmouseover事件，其實我更細喜歡說是通過事件冒泡。

var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li");
ul.onmouseover = function(event){
    // 兼容Ie
    var event = event || window.event;
    // 獲取最具體的元素
    var target = event.srcElement || event.target;
    // 判斷這個元素是不是ul，如果是的話就不給它添加背景，需要我們只是需要給li添加
    if(target.nodeName.toLowerCase()!=="ul"){
        target.style.backgroundColor = "red";
    }
}
ul.onmouseout = function(event){
    var event = event || window.event;
    var target = event.srcElement || event.target;
    if(target.nodeName.toLowerCase()!=="ul"){
        target.style.backgroundColor = "";
    }
}
var btn = document.getElementById("btn");
btn.onclick = function(){
    var createLi = document.createElement("li");
    createLi.innerHTML = "我是新添加的li";
    ul.appendChild(createLi);
}