JavaScript中事件的绑定与解绑

零、码仙励志

一、事件的绑定

1. 对象.on事件名字=事件处理函数

2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);

3. 对象.attachEvent("有on的事件名字",事件处理函数);

4.总结绑定事件的区别

5.兼容代码

二、事件的解绑

1.注意（必看）

2.对象.on事件名字=null;

3.对象.removeEventListener("没有on的事件类型",函数名字,false);

4.对象.detachEvent("on事件类型",函数名字);

5.兼容代码

三、事件冒泡

1.解释

2.实例演示

3.阻止事件冒泡 window.event.cancelBubble=true;

4.阻止事件冒泡 e.stopPropagation();

四、事件阶段

五、为同一个元素绑定多个不同的事件,指向相同的事件处理函数

零、码仙励志

行动是治愈恐惧的良药，而犹豫、拖延将不断滋养恐惧

一、事件的绑定

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>

点击蓝色div

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>

本篇博客来自于传智播客视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901