javascript 事件委托 event delegation

 

事件委托 event delegation

一、概念：

假设我们有很多个子元素，每个元素被点击时都会触发相应事件，普通的做法是给每个子元素添加一个事件监听。

而，事件委托则是给它们的父元素添加一个事件监听器，子元素上没有任何事件监听。当子元素被点击时，这个点击事件冒泡到父元素上，然后父元素上绑定的事件监听来分析和处理这是哪个子元素被点击了。

二、例子1：一个ul及几个li：

<ul id="parent-list" style="border:1px solid black;">
    <li id="post-1">Item 1</li>
    <li id="post-2">Item 2</li>
    <li id="post-3">Item 3</li>
    <li id="post-4">Item 4</li>
    <li id="post-5">Item 5</li>
    <li id="post-6">Item 6</li>
</ul>

当点击li时，父元素上绑定的事件监听如何得知是哪个li被点击了？这里用到了target属性，捕获真正被点击的节点元素

<script>
    (function(){
        var parentEl = document.getElementById("parent-list");

        parentEl.onclick = function(e){
            console.log(e.target);
        };
        /*打印结果为
        * <li id="post-6">Item 6</li>等等
        * 或者是整个ul元素包括其子元素
        * 所以，若要得到li元素，则需要对事件来源做筛选即：
        * */

    })();
</script>

接下来，对事件来源做筛选，只要li元素，其他的都不要：

修改上述对应代码为：

    parentEl.onclick = function(e){
        //找到被点击的li并输出其id
        if(e.target && e.target.nodeName == "LI"){
            console.log(e.target.id);
        }
    };

三、优点：

当子元素数量不固定，即：经常增删子元素时，与其给每个新增删的子元素绑定事件，不如给它们的父元素添加监听方便。

四、jquery版的事件委托：用.on()

/*jq版*/
$(function(e) {
    var parentEl = $("#parent-list");
    parentEl.on("click",function(e){
        //找到被点击的li并输出其id
        if(e.target && e.target.nodeName == "LI"){
            console.log(e.target.id);
        }
    });
});