JavaScript学习笔记

DOM批量绑定事件的三种方法

2016-12-02  本文已影响0人  riceAndshine

我们应该都遇到过要给很多 dom 节点绑定同一事件的问题,但是当我们遍历的时候其中参数 i 的处理如果不小心的话就会处理的有点问题.

应用不同的场景,有下面三种解决方法 :

function bindClick1() {
    var memberList = $api.byId('memberList');
    var item = $api.domAll(memberList,'.item');
    for (var i = 0,itemLen = item.length; i < itemLen; i++) {
        $api.addEvt(item[i],'click',function () {
              itemId = $api.attr(this,'id');
              alert(i);
        });         
    }
}
function bindClick3() {
    var arr = [1,2,3];
    var item = $api.domAll($api.byId('memberList'),'.item');
    function bibao() {
        return function (i) {
            $api.addEvt(item[i],'click',function () {
            alert(arr[i]);
            }); 
        }
    }
    for (var i = 0,itemLen = item.length; i < itemLen; i++) {
        var func = bibao();
        func(i);           
    }
}

利用闭包的特性来保存变量,阻止变量的提升.
可以简单的写成下面的形式

    function bindClick2() {
        var arr = [1,2,3];
        var item = $api.domAll($api.byId('memberList'),'.item');
        for (var i = 0,itemLen = item.length; i < itemLen; i++) {
            (function (j) {
                $api.addEvt(item[j],'click',function () {
                    alert(arr[j]);
                }); 
            })(i)                
        }
    }
    function bindClick() {
        var arr = [1,2,3,4];
        var item = $api.domAll($api.byId('memberList'),'.item');
        for (let i = 0,itemLen = item.length; i < itemLen; i++) {
            $api.addEvt(item[i],'click',function () {
                alert(arr[i]);
            });           
        }
    }
上一篇 下一篇

猜你喜欢

热点阅读