一个函数简单实现事件委托

版权声明：转载需注明出处 https://blog.csdn.net/samfung09/article/details/81035887

平时给元素绑定事件一般是直接写到属性上（即0级事件处理程序）或是addEventListener()监听事件（2级事件处理程序）。但有些应用场景以上方法可能不太管用，比如给后来动态添加的元素绑定事件监听。这时就可以使用事件委托了（也叫事件代理）。事件委托简单通俗理解就是，给外层元素绑定事件，然后利用事件冒泡，针对当前触发的元素执行相应的函数。

具体代码

    <ul class="list">
        <li>第一条</li>
        <li>第二条</li>
        <li>第三条</li>
    </ul>
    <button class="btn">添加列表</button>
    <script>
        var list = document.querySelector('.list');
        var btn = document.querySelector('.btn');

        btn.onclick = function(){
            var li = document.createElement('li');
            li.innerHTML = '<p>大家好<a href="javascript:;">才是真的好</a></p>'
            list.appendChild(li);
        }
        
        //用for循环给每一个元素绑定事件达不到我们想要的效果
        // var lis = document.querySelectorAll('.list li');
        // for(var i=0; i<lis.length; i++){
        //     // lis[i].onclick = function(){
        //     //     alert(this.innerText);
        //     // }
        //     lis[i].addEventListener('click', function(){
        //         alert(this.innerText);
        //     },false);
        // }

        on(list, 'click', 'a', function(){
            alert(this.innerText);
        })

        function on(el, eventType, selector, fn){
            if(fn === undefined){       //如果只传三个参数，即为自身绑定事件
                fn = selector;
                selector = null;
                el.addEventListener(eventType, fn, false);
            }else{      //如果传入四个参数，即为事件委托，selector为事件目标
                el.addEventListener(eventType, function(e){
                    if(e.target.matches(selector)){     //如果当前时间目标与selector匹配
                        fn.call(e.target, e);
                    }
                }, false);
            }
        }
    </script>

参考文章