JS中如何巧妙的用事件委托

常见场景：页面有多个相同的按钮需要绑定同样的事件逻辑。

如下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);

巴特西

JS中如何巧妙的用事件委托

最新文章

热门文章