addEventListener和on的区别

时间 2019-11-11

标签 addeventlistener 区别繁體版

原文原文链接

为何须要addEventListener？html

先来看一个片断：函数

html代码spa

<div id="box">追梦子</div>code

用on的代码htm

 1 window.onload = function(){ 2 var box = document.getElementById("box"); 3 box.onclick = function(){ 4 console.log("我是box1"); 5 } 6 box.onclick = function(){ 7 box.style.fontSize = "18px"; 8 console.log("我是box2"); 9 } 10 }
　　　　　运行结果：“我是box2”

看到了吧，第二个onclick把第一个onclick给覆盖了，虽然大部分状况咱们用on就能够完成咱们想要的结果，可是有时咱们又须要执行多个相同的事件，很明显若是用on完成不了咱们想要的，那不用猜，大家确定知道了，对！addEventListener能够屡次绑定同一个事件而且不会覆盖上一个事件。blog

用addEventListener的代码事件

1 window.onload = function(){ 2 var box = document.getElementById("box"); 3 box.addEventListener("click",function(){ 4 console.log("我是box1"); 5 }) 6 box.addEventListener("click",function(){ 7 console.log("我是box2"); 8 }) 9 }
　　　　运行结果：我是box1
　　　　　　　　　我是box2

addEventListenert方法第一个参数填写事件名，注意不须要写on，第二个参数能够是一个函数，第三个参数是指在冒泡阶段仍是捕获阶段处理事件处理程序,若是为true表明捕获阶段处理,若是是false表明冒泡阶段处理，第三个参数能够省略，大多数状况也不须要用到第三个参数,不写第三个参数默认falseget

第三个参数的使用io

有时候的状况是这样的console

若是我给box加click事件，若是我直接单击box没有什么问题，可是若是我单击的是child元素，那么它是怎么样执行的？（执行顺序）

1 box.addEventListener("click",function(){ 2 console.log("box"); 3 }) 4 5 child.addEventListener("click",function(){ 6 console.log("child"); 7 })
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

也就是说，默认状况事件是按照事件冒泡的执行顺序进行的。

若是第三个参数写的是true，则按照事件捕获的执行顺序进行的。

1 box.addEventListener("click",function(){ 2 console.log("box"); 3 },true) 4 5 child.addEventListener("click",function(){ 6 console.log("child"); 7 }) 　　执行的结果： 　　　　　　　　box 　　　　　　　　child

事件冒泡执行过程：

　　　　　　　　从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿咱们上面的案例讲它的顺序是：child->box

事件捕获执行过程：

　　　　　　　　从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿咱们上面的案例讲它的顺序是：box->child