JavaScript中事件的绑定与解绑
分类：javascript
一、事件的绑定
1. 对象.on事件名字=事件处理函数
缺点：如果绑定多个事件，前面的事件会被后面的事件覆盖
<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick = function () {
console.log("第一");
};
document.getElementById("btn").onclick = function () {
console.log("第二");
};
</script>
</body>
2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);
解释：第三个参数在本篇文章的事件阶段中有解释
优点：可以绑定多个事件
缺点：谷歌和火狐支持,IE8不支持
<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").addEventListener("click", function () {
console.log("第一");
}, false);
document.getElementById("btn").addEventListener("click", function () {
console.log("第二");
}, false);
</script>
3. 对象.attachEvent("有on的事件名字",事件处理函数);
优点：可以绑定多个事件
缺点：谷歌和火狐不支持，IE8支持
<body>
<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").attachEvent("onclik", function () {
console.log("第一");
});
document.getElementById("btn").attachEvent("click", function () {
console.log("第二");
}, false);
</script>
</body>
4.总结绑定事件的区别
1.方法名不一样
2.参数个数不一样addEventListener三个参数
attachEvent两个参数
3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
ttachEvent 谷歌火狐不支持,IE11不支持,IE8支持
4.this不同,addEventListener 中的this是当前绑定事件的对象
attachEvent中的this是window
5.addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on
5.兼容代码
<script>
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
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;
}
};
</script>
测试
<body>
<input type="button" value="第一个按钮" id="btn"/>
<script>
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
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(document.getElementById("btn"), "click", function () {
console.log("码仙1");
});
addEventListener(document.getElementById("btn"), "click", function () {
console.log("码仙2");
});
addEventListener(document.getElementById("btn"), "click", function () {
console.log("码仙3");
});
</script>
</body>
二、事件的解绑
1.注意（必看）
用什么方式绑定事件,就应该用对应的方式解绑事件
1.解绑事件
对象.on事件名字=事件处理函数--->绑定事件
对象.on事件名字=null;
2.解绑事件
对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
对象.removeEventListener("没有on的事件类型",函数名字,false);
3.解绑事件
对象.attachEvent("on事件类型",命名函数);---绑定事件
对象.detachEvent("on事件类型",函数名字);
2.对象.on事件名字=null;
<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
document.getElementById("btn1").onclick = function () {
console.log("码仙");
};
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").onclick = null;
};
</script>
</body>
3.对象.removeEventListener("没有on的事件类型",函数名字,false);
<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
function f1() {
console.log("第一个");
};
function f2() {
console.log("第二个");
};
document.getElementById("btn1").addEventListener("click", f1, false);
document.getElementById("btn1").addEventListener("click", f2, false);
//点击第二个按钮把第一个按钮的第一个点击事件解绑
document.getElementById("btn2").onclick = function () {
//解绑事件的时候,需要在绑定事件的时候,使用命名函数
document.getElementById("btn1").removeEventListener("click", f1, false);
};
</script>
</body>
4.对象.detachEvent("on事件类型",函数名字);
<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<div id="dv"></div>
<script>
function f1() {
console.log("第一个");
};
function f2() {
console.log("第二个");
};
document.getElementById("btn1").attachEvent("onclick", f1);
document.getElementById("btn1").attachEvent("onclick", f2);
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").detachEvent("onclick", f1);
};
</script>
</body>
5.兼容代码
//解绑事件的兼容
//为任意的一个元素,解绑对应的事件
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;
}
}
测试
<body>
<input type="button" value="按钮" id="btn1"/>
<input type="button" value="干掉第一个按钮的事件" id="btn2"/>
<script>
//绑定事件的兼容
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(document.getElementById("btn1"), "click", f1);
addEventListener(document.getElementById("btn1"), "click", f2);
document.getElementById("btn2").onclick = function () {
removeEventListener(document.getElementById("btn1"), "click", f1);
};
</script>
</body>
三、事件冒泡
1.解释
多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了
2.实例演示
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id);
};
document.getElementById("dv2").onclick = function () {
console.log(this.id);
};
document.getElementById("dv3").onclick = function () {
console.log(this.id);
};
</script>
</body>
点击蓝色div
3.阻止事件冒泡 window.event.cancelBubble=true;
<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id);
};
document.getElementById("dv2").onclick = function () {
console.log(this.id);
//阻止事件冒泡
// IE特有的,谷歌支持,火狐不支持
window.event.cancelBubble=true;
};
document.getElementById("dv3").onclick = function () {
console.log(this.id);
};
</script>
4.阻止事件冒泡 e.stopPropagation();
<script>
document.getElementById("dv1").onclick = function () {
console.log(this.id);
};
document.getElementById("dv2").onclick = function (e) {
console.log(this.id);
//阻止事件冒泡
//谷歌和火狐支持
e.stopPropagation();
};
document.getElementById("dv3").onclick = function () {
console.log(this.id);
};
</script>
四、事件阶段
通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
如果这个属性的值是:
1---->捕获阶段
2---->目标阶段
3---->冒泡阶段
一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向里
addEventListener方法的第三个参数是false的时候是冒泡阶段
addEventListener方法的第三个参数是true的时候是捕获阶段
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script>
//同时注册点击事件
var objs = [document.getElementById("dv3"), document.getElementById("dv2"), document.getElementById("dv1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
ele.addEventListener("click", function (e) {
console.log(this.id + "====>" + e.eventPhase);
}, false);
});
</script>
</body>
点击蓝色后
addEventListener方法的第三个参数是true的时候，点击蓝色div
五、为同一个元素绑定多个不同的事件,指向相同的事件处理函数
<body>
<input type="button" value="码仙" id="btn"/>
<script>
//为同一个元素绑定多个不同的事件,指向相同的事件处理函数
document.getElementById("btn").onclick = f1;
document.getElementById("btn").onmouseover = f1;
document.getElementById("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;
}
}
</script>
</body>
作者：掘金-JavaScript中事件的绑定与解绑