弯道超车，换一个思路，避免addEventListener为同一个元素重复赋予事件

addEventListener可以给同一个元素赋予多次同一个事件。
执行一次，就多一次事件效果。这不是我想要的。

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
　　　　　运行结果：“我是box2”

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
　　　　运行结果：我是box1
　　　　　　　　　我是box2

像touchstart，touchend这种html5事件必须通过addEventListener来实现。

// 长按事件
$.fn.longPress = function(fn) {
    var timeout = undefined;
    var $this = this;

    for(var i = 0;i<$this.length;i++){
        $this[i].addEventListener('touchstart', function(event) {
            timeout = setTimeout(fn, 800);
        }, false);
        $this[i].addEventListener('touchend', function(event) {
            clearTimeout(timeout);
        }, false);
    }
}

当用addEventListener来实现的时候，事件绑定的方法会被执行多次。

后来网上查找，removeEventListener来移除事件。但是貌似没效果。

于是我想到了，为元素加一个属性来标识是否已经有了事件了。如果有的话，就不要再次赋予事件了。

// 长按事件
$.fn.longPress = function(fn) {
    var timeout = undefined;
    var $this = this;

    for(var i = 0;i<$this.length;i++){
        // 检测是否已经有了事件
        if ($this[i].getAttribute("data-longpress")== "1") {
            continue;
        }

        $this[i].setAttribute("data-longpress","1");

        $this[i].addEventListener('touchstart', function(event) {
            timeout = setTimeout(fn, 800);
        }, false);
        $this[i].addEventListener('touchend', function(event) {
            clearTimeout(timeout);
        }, false);
    }
}    

通过元素的属性标识，就可以避免同一个元素，被赋予多次相同的事件了。

进阶，获取事件元素对应的参数

$.fn.longPress = function(fn) {
    var timeout = undefined;
    var $this = this;

    for(var i = 0;i<$this.length;i++){
        // 检测是否已经有了事件
        if ($this[i].getAttribute("data-longpress")== "1") {
            continue;
        }
        $this[i].setAttribute("data-longpress","1");
        $this[i].addEventListener('touchstart', function(e) {
            // 这里的e就是执行的元素
            var target;
            if(!e.target.getAttribute("data-messageId")) {
                target = e.target.parentNode;
            } else {
                target = e.target;
            }

            var longpressTarget = $api.getStorage('longpressTarget');

            if (!longpressTarget) {
                longpressTarget = {};
            }

            longpressTarget.targetId = target.getAttribute("data-targetId");
            longpressTarget.senderUserId = target.getAttribute("data-senderUserId");
            longpressTarget.messageId = target.getAttribute("data-messageId");

            $api.setStorage('longpressTarget',longpressTarget);

            timeout = setTimeout(fn, 800);
        }, true);
        $this[i].addEventListener('touchend', function(e) {
            clearTimeout(timeout);
        }, true);
    }
}

这里的e，就是事件执行的元素。获取它，就能得到想要的元素。然后得到相关参数，进行后续操作。这里将参数保存到本地的storage中，便于后续操作。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/7073195.html如需转载请自行联系原作者