美文网首页
addEventListener

addEventListener

作者: 而生lhw | 来源:发表于2017-07-06 10:03 被阅读37次

执行结果:第二个onclick把第一个onclick给覆盖了,虽然大部分情况我们用on就可以完成我们想要的结果,但是有时我们又需要执行多个相同的事件,很明显如果用on完成不了我们想要的,那不用猜,你肯定知道了,对~ addEventListenter可以多次绑定同一个事件并且不会覆盖上一个事件。

addEventListener方法第一个参数填写事件名,注意不需要写on,第二个参数可以是一个函数,第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理,第三个参数可以省略,大多数情况也不需要用到第三个参数,不写第三个参数默认false

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

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

事件冒泡执行过程:从最具体的元素(你点击的那个元素)开始向上开始冒泡,拿我们上面的案例讲,它的顺序是:child>box

事件捕获执行过程:从最不具体的元素(最外面的那个盒子)开始向里面冒泡,拿我们上面的案例来讲它的顺序是:box>child

注:参考大神资料,个人笔记记录

相关文章

网友评论

      本文标题:addEventListener

      本文链接:https://www.haomeiwen.com/subject/nipjcxtx.html