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如需转载请自行联系原作者