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

平时给元素绑定事件一般是直接写到属性上(即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>

参考文章
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值