从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
Daotin
发布于 2018-08-31 11:09:43
发布于 2018-08-31 11:09:43
运行总次数：0
一、为元素绑定多个事件
前导：如果一个按钮绑定了多个点击事件，那么点击按钮的时候只会执行最后一个点击事件，前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件，并且每个事件都会执行呢？
1、为元素绑定多个事件
<body>
<input type="button" value="按钮1" id="btn1">
<input type="button" value="按钮2" id="btn2">
<!-- <div id="dv"></div> -->
<script src="common.js"></script>
<script>
// 参数有3个
// 参数1：事件的类型（事件的名字），不要on
// 参数2：事件处理函数（命名函数或者匿名函数）
// 参数3：false
// 兼容性：chrome，firefox支持，IE8不支持
my$("btn1").addEventListener("click", function() {
alert("1");
},false)
my$("btn1").addEventListener("click", function() {
alert("2");
},false)
my$("btn1").addEventListener("click", function() {
alert("3");
},false)
// 参数有2个
// 参数1：事件的类型（事件的名字），要on
// 参数2：事件处理函数（命名函数或者匿名函数）
// 兼容性：chrome，firefox不支持，IE8支持
my$("btn2").attachEvent("onclick", function() {
alert("4");
});
my$("btn2").attachEvent("onclick", function() {
alert("5");
});
my$("btn2").attachEvent("onclick", function() {
alert("6");
});
</script>
</body>绑定事件的方式： addEventListener: chrome，firefox支持，IE8不支持 attachEvent: chrome，firefox不支持，IE8支持
2、绑定事件兼容代码
<body>
<input type="button" value="按钮" id="btn">
<script src="common.js"></script>
<script>
// 为任意元素添加任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件1");
});
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件2");
});
addAnyEventListener(my$("btn"), "click", function() {
console.log("事件3");
});
</script>
</body>
my("dv").onclick == my$("dv")["onclick"]
3、绑定事件的区别
- 方法名不同；
- 参数个数不同，addEventListener有三个参数，attachEvent有两个参数；
- addEventListener中事件的类型没有 on，attachEvent中事件的类型有on；
- chrome,firefox 支持 addEventListener ，IE8不支持； chrome,firefox 不支持 attachEvent ，IE8支持；
- 事件中的 this 不同，addEventListener 中的 this 是当前绑定的对象； attachEvent 中的 this 是 window。
二、为元素解绑事件
1、三种方式
1.1、方式一
如果使用 元素.onclick = function(){}; 的方式绑定对象的话，解绑的方式为 元素.onclick = null;
1.2、方式二
如果使用 元素.addEventListener("click", f1, false); 的方式绑定对象的话，解绑方式为 元素.removeEventListener("click", f1, false);
注意：这里面不能使用匿名函数，因为需要同一个事件处理函数，而两个匿名函数是两个不同的函数，所以需要使用命名函数。
1.3、方式三
如果使用 元素.attachEvent("onclick", f1); 的方式绑定对象的话，解绑方式为 元素.detachEvent("onclick", f1);
2、解绑事件兼容代码
// 为任意元素绑定任意事件
function addAnyEventListener(element, type, func) {
if(element.addEventListener) {
element.addEventListener(type, func, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, func);
} else {
element["on"+type] = func;
}
}
// 为任意元素解绑任意事件
function removeAnyEventListener(element, type, funcName) {
if(element.removeEventListener) {
element.removeEventListener(type, funcName, false);
} else if(element.detachEvent) {
element.detachEvent("on"+type, funcName);
} else {
element["on"+type] = null;
}
}示例：
<body>
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮" id="btn2">
<script src="common.js"></script>
<script>
function f1() {
console.log("第一个");
}
function f2() {
console.log("第二个");
}
addAnyEventListener(my$("btn1"), "click", f1);
addAnyEventListener(my$("btn1"), "click", f2);
my$("btn2").onclick = function () {
removeAnyEventListener(my$("btn1"), "click", f1);
}
</script>
</body>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-06-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
