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 前端学习的冒险之旅吧!
|
||
|
||
![](https://github.com/Daotin/pic/raw/master/fgx.png)
|
||
|
||
|
||
|
||
|
||
# 一、为元素绑定多个事件
|
||
|
||
**前导:**如果一个按钮绑定了多个点击事件,那么点击按钮的时候只会执行最后一个点击事件,前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件,并且每个事件都会执行呢?
|
||
|
||
|
||
|
||
## 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>
|
||
```
|