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

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

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

• 第一种,如果我们需要在遍历的时候从dom节点中获取需要的数据,我们就可以直接在循环体内添加时间绑定就可以了.

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);
        });         
    }
}

• 第二种,当我们不是在dom中获取数据(通常都是..)的时候.我们就可以用闭包来处理

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)                
        }
    }

• 第三种最简单 利用es6的关键词 let .需要注意的是兼容性问题(可以用babel工具来转换使用)

    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]);
            });           
        }
    }