在一个元素上绑定多个事件

63 阅读 0 评论 42 点赞

我是靠谱客的博主大方丝袜，最近开发中收集的这篇文章主要介绍在一个元素上绑定多个事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

DOM2级定义了两个方法用于处理指定和删除事件处理程序的操作: addEventListener()和removeEventListener()。所有的DOM节点中都包含了这两个方法，并且它们都接受3个参数，要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序，比如要在按钮上为click事件添加事件

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.addEventListener("click", function () {
alert("Hello world");
}, false);

这个两个事件会按他们的顺序触发

通过addEventListener()添加的事件只能用removeEventListener()来移除，移除时传入的参数与添加事件使用的参数相同。通过addEventListener()添加的匿名函数无法删除

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //没有用！
alert(this.id);
}, false);

var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);// 这里省略其他代码
btn.removeEventListener("click", handler, false);// 有效！