事件委托 | 易学教程

事件委托：把原本需要绑在子元素上的响应事件委托给父元素，让父元素担当事件监听的职务，其原理是DOM元素的事件冒泡。

事件冒泡：一个事件触发后，会在子元素和父元素之间传播，分为三个阶段：捕获阶段、目标阶段、冒泡阶段

图解：

事件委托的实例（添加li元素）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul>
        <li></li>
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li id="li1"></li>
    </ul>
    <button>添加li</button>
    <script>
    var oUl = document.querySelector("ul");
    var aLi = document.getElementsByTagName("li");
    var oBtn = document.querySelector("button");
    oBtn.onclick = function (){
        var oLi = document.createElement("li");
        oUl.appendChild(oLi);
    }
delegation(oUl,"li","click",function (){
        console.log(this);
        this.style.backgroundColor = "red";
    })
    function delegation(fEle,ele,attr,fn){
        bind(fEle,attr,[function (ev){
            ev = ev || event;
            var nodeList = fEle.querySelectorAll(ele);
            for(var i=0;i<nodeList.length;i++){
                if(nodeList[i]==ev.target){
                    fn.call(ev.target);
                }
            }
        }]);
    }
    function bind(obj,attr,fns){
        for(var i=0;i<fns.length;i++){
            obj.attachEvent ? obj.attachEvent("on"+attr,function (){ fns[fns.length-1-i].call(obj);}) : obj.addEventListener(attr,fns[i],false);
        }
    }
    </script>
</body>
</html>

事件委托的优点：

1.大量节省内存占用，减少事件注册

2.实现当新增子对象时无需再次对齐绑定（动态绑定），例如上述实例，动态创建li元素，并为其绑定点击事件

上述例子使用原生JS实现的，可以封装为一个函数，我们也可以用jQuery实现：

格式：$(selector).delegate(childSelector, event, data, function)

上面的实例用jQuery写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li></li>
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li id="li1"></li>
    </ul>
    <button>添加li</button>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
    var oUl = document.querySelector("ul");
    var aLi = document.getElementsByTagName("li");
    var oBtn = document.querySelector("button");
    oBtn.onclick = function (){
        var oLi = document.createElement("li");
        oUl.appendChild(oLi);
    }
    $("#ul").delegate("li","click",function(){
        $(this).css("background-color","red");
    })
</script>
</body>
</html>

来源：CSDN

作者：倩lq

链接：https://blog.csdn.net/L666Q/article/details/103740923

标签

queryselector