一个全面的了解和之间的差异对addEventListener
先看一个片段:
HTML代码
zhuimengzi
使用上的代码
在window.onload =函数(){
VaR箱= document.getelementbyid(盒子);
box.onclick =函数(){
console.log(我1 );
}
box.onclick =函数(){
box.style.fontsize =18px ;
console.log(我箱);
}
}
运行结果:我箱
你看,二onclick覆盖第一事件,虽然在大多数情况下,我们使用来完成我们想要的结果,但是有时候我们需要采取一些相同的事件,很显然,如果我们想用以完成它,不想,你知道的,对!注册侦听器可以绑定同一事件多次不改写事件。
使用addEventListener的代码
在window.onload =函数(){
VaR箱= document.getelementbyid(盒子);
Box.addEventListener(单击
console.log(我1 );
})
Box.addEventListener(单击
console.log(我箱);
})
}
运行结果:我1
我箱
addeventlistenert方法在事件名称的第一个参数,不需要写上,第二个参数是一个函数的第三个参数是指泡沫或捕获阶段处理事件处理程序中,如果真的是捕获阶段,如果假是冒泡阶段,第三个参数可以省略,在多数情况下不需要使用第三个参数,默认值为假不写第三个参数
第三参数的使用
有时情况就是这样。
U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000
如果我添加框点击,如果我直接点击框,没有什么问题。但是,如果我单击子元素,我该如何执行它呢(执行顺序)
Box.addEventListener(单击
console.log(盒子);
})
Child.addEventListener(单击
console.log(孩子);
})
实施的结果:
孩子
箱
也就是说,默认事件是在事件气泡的执行顺序中执行的。
如果第三个参数是true,则按照事件的执行顺序执行。
Box.addEventListener(单击
console.log(盒子);
},真的)
Child.addEventListener(单击
console.log(孩子);
})
实施的结果:
箱
孩子
事件冒泡执行过程:
从最具体的元素开始(您单击的元素)开始冒泡,并以我们的例子说明订单是:子>框
事件捕获执行过程:
从最具体的元素(最外层的盒子),开始泡在里面,并以案例对我们说的顺序是:箱>的孩子
之间的差异和对addEventListener是分享所有的内容,小编。我们希望能给你一个参考,希望你能支持它。