从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

时间:2021-02-17 04:32:28

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......

+------------------------------------------------------------

github:https://github.com/Daotin/Web

微信公众号:Web前端之巅

博客园:http://www.cnblogs.com/lvonve/

CSDN:https://blog.csdn.net/lvonve/

+-----------------------------------------------------------

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

一、为元素绑定多个事件

前导:如果一个按钮绑定了多个点击事件,那么点击按钮的时候只会执行最后一个点击事件,前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件,并且每个事件都会执行呢?

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>

从零开始学 Web 之 DOM(六)为元素绑定与解绑事件

从零开始学 Web 之 DOM(六)为元素绑定与解绑事件