姿势最重要:JS中如何巧用事件委托

    2017-10-09 17:16  浏览次数:307

什么是事件委托呢?通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

我们在工作中有个常见的场景:页面有多个相同的按钮需要绑定同样的事件逻辑。

如下HTML,实现:点击每个按钮,当它的 data-id不为null的时候输出它的data-id(实际业务中会有更复杂的逻辑)

<ul id="parent">
        <li class="btn" data-id="1">按鈕1</li>
        <li class="btn" data-id="2">按鈕2</li>
        <li class="btn" data-id="null">按鈕3</li>
        <li class="btn" data-id="3">按鈕4</li>
        <li class="btn" data-id="null">按鈕5</li>
    </ul>

实现方案一:(缺点 1 for循环影响性能,2每次循环都会在内部创建一个事件,3 如果 li 是动态追加的会导致事件失效。)

var btns=document.getElementsByClassName("btn");//扩展 可以有多种获取DOM方法
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function(){
        var id=this.getAttribute("data-id");
        if(id!="null"){
            console.log(id);
        }
    }
}

实现方案二:(解决了方案一种的2,3缺点,但是还有for循环!IOS下事件委托失效解决方案)

var btns=document.getElementsByClassName("btn");
function handleClick(){
    var id=this.getAttribute("data-id");
    if(id!="null"){
        console.log(id);
    }
}
for(var i=0;i<btns.length;i++){
    btns[i].addEventListener("click",handleClick,false);
}

实现方案三:(完美解决方案1种的所有缺点)

涉及知识点:addEventListener,event

var parent=document.getElementById("parent");
function handleClick(){
    var e=window.event||arguments[0];
    var target=e.srcElement||e.target;
    if(target.nodeName.toLowerCase() == 'li'){
        var id=target.getAttribute("data-id");
        if(id!="null"){
            console.log(id);
        }
    }
}
parent.addEventListener("click",handleClick,false);

方案三的升级版:注册绑定事件方便复用

// 1、通用綁定事件
function bind(elem,eventType,callback){
    if(elem.addEventListener){
        elem.addEventListener(eventType,callback,false);
    }else{
        elem.attachEvent("on"+eventType,function(){
            callback.call(elem);
        });
    }
}

var parent=document.getElementById("parent");
function handleClick(){
    var e=window.event||arguments[0];
    var target=e.srcElement||e.target;
    if(target.nodeName.toLowerCase() == 'li'){
        var id=target.getAttribute("data-id");
        if(id!="null"){
            console.log(id);
        }
    }
}
bind(parent,"click",handleClick);

以上,希望对大家有所帮助。

作者:逗伴不是瓣


近期公开课

官方微博 官方微博
官方微信 官方微信

联系我们

购买:sales@evgetedu.com

意见与建议: service@evgetedu.com

Tel:400-700-1020(免费)

023-66090381(重庆总部)

地址:重庆市高新区陈家坪帝豪名都31楼