mirror of
https://github.com/Daotin/Web.git
synced 2024-10-30 04:24:45 +08:00
207 lines
5.6 KiB
Markdown
207 lines
5.6 KiB
Markdown
>大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
|
||
>
|
||
> - github：https://github.com/Daotin/Web
|
||
> - 微信公众号：[Web前端之巅](https://github.com/Daotin/pic/raw/master/wx.jpg)
|
||
> - 博客园：http://www.cnblogs.com/lvonve/
|
||
>
|
||
> 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
|
||
|
||
|
||
|
||
|
||
|
||
|
||
# 一、为元素绑定多个事件
|
||
|
||
**前导：**如果一个按钮绑定了多个点击事件，那么点击按钮的时候只会执行最后一个点击事件，前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件，并且每个事件都会执行呢？
|
||
|
||
|
||
|
||
## 1、为元素绑定多个事件
|
||
|
||
```html
|
||
<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、绑定事件兼容代码
|
||
|
||
```html
|
||
<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、解绑事件兼容代码
|
||
|
||
```js
|
||
// 为任意元素绑定任意事件
|
||
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;
|
||
}
|
||
}
|
||
```
|
||
|
||
示例：
|
||
|
||
```html
|
||
<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>
|
||
```
|