时间戳

首页 > 技术文章 > JS事件委托的原理和应用

JS事件委托的原理和应用

pssp 2016-03-08 11:15 原文

　　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这个地方，建议你还是把基础学好了在来看。我只是讲我每天学到的东西，不可能一直去讲基础的，还请见谅。

推荐阅读