JS事件委托的原理和应用

时间：2023-02-05 23:48:10

　　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);

}

　　ok，后添加的元素也会有我们添加的事件。如果你没有看懂这段代码，我觉得你应该是困在event这个地方，建议你还是把基础学好了在来看。我只是讲我每天学到的东西，不可能一直去讲基础的，还请见谅。

相关文章