绑定多个事件
1. 对象.addEventListener(“事件类型”,事件处理函数,false)——谷歌和火狐支持,IE8不支持
- 参数1:事件的类型—事件的名字,没有on
- 参数2:事件处理函数—函数(命名函数,匿名函数)
- 参数3:布尔类型,指定事件处理函数的时期或阶段-------先写false
为同一个元素绑定多个相同的事件--
my$("btn").addEventListener("click",function () {
console.log("你好啊");
},false);
my$("btn").addEventListener("click",function () {
console.log("你好牛啊");
},false);
my$("btn").addEventListener("click",function () {
console.log("你好牛逼啊");
},false);
my$("btn").addEventListener("click",function () {
console.log("你是好牛逼啊");
},false);
2. 对象.attachEvent(“有on的事件类型”,事件处理函数)——谷歌不支持,火狐不支持,IE8支持
- 参数1:事件类型—事件名字，有on
- 参数2:事件处理函数—函数(命名函数,匿名函数)
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦1");
});
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦2");
});
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦3");
// });
3. 绑定事件兼容代码
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("你好啊");
});
addEventListener(my$("btn"),"click",function () {
console.log("你好二啊");
});
addEventListener(my$("btn"),"click",function () {
console.log("你好二虎啊");
});
4.两种方法的区别
相同点: 都可以为元素绑定事件
不同点:
- 方法名不一样
- 参数个数不一样
addEventListener三个参数,
attachEvent两个参数 - addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持 - this不同,
addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window - addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on
注意:用什么方式绑定事件,就应该用对应的方式解绑事件
1.对象.on事件名字=null
// 1.绑定事件
my$("btn").onclick=function () {
console.log("我很好");
};
my$("btn2").onclick=function () {
// 2.解绑事件
my$("btn").onclick=null;
};
2. removeEventListener解绑事件
对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件
对象.removeEventListener(“没有on的事件类型”,函数名字,false);
function f1() {
console.log("第一个事件");
}
function f2() {
console.log("第二个事件");
}
my$("btn").addEventListener("click",f1,false);
my$("btn").addEventListener("click",f2,false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
my$("btn2").onclick=function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
my$("btn").removeEventListener("click",f1,false);
};
3. detachEvent解绑事件
对象.attachEvent(“on事件类型”,命名函数);—绑定事件
对象.detachEvent(“on事件类型”,函数名字);
function f1() {
console.log("第一个事件");
}
function f2() {
console.log("第二个事件");
}
my$("btn").attachEvent("onclick",f1);
my$("btn").attachEvent("onclick",f2);
my$("btn2").onclick=function () {
my$("btn").detachEvent("onclick",f1);
};
4. 解绑兼容性代码
//绑定事件的兼容
function addEventListener(element,type,fn) {
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
function removeEventListener(element,type,fnName) {
if(element.removeEventListener){
element.removeEventListener(type,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,fnName);
}else{
element["on"+type]=null;
}
}
案例：
function f1() {
console.log("第一个事件");
}
function f2() {
console.log("第二个事件");
}
addEventListener(my$("btn1"),"click",f1);
addEventListener(my$("btn1"),"click",f2);
my$("btn2").onclick=function () {
removeEventListener(my$("btn1"),"click",f1);
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="小红帽" id="btn"/>
<script src="common.js"></script>
<script>
//为同一个元素绑定多个不同的事件,指向相同的事件处理函数
my$("btn").onclick = f1;
my$("btn").onmouseover = f1;
my$("btn").onmouseout = f1;
function f1(e) {
switch (e.type) {
case "click":
alert("好帅哦");
break;
case "mouseover":
this.style.backgroundColor = "red";
break;
case "mouseout":
this.style.backgroundColor = "green";
break;
}
}
// my$("btn").οnmοuseοver=function (e) {
// console.log(e);
// };
</script>
</body>
</html>
