addEventListener

addEventListener() 事件监听
addEventListener(type:String, listener:Function, useCaputer:Boolean(default:false)


语法
在addEventListener中前三个参数比较重要,
第一个参数是事件类型,例如click或pressdown pressup等等,
第二个参数就是响应的时候所执行的函数,
第三个参数是个布尔值。默认是false(冒泡阶段执行)true(捕获阶段产生),是事件流的问题。


侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。
此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。


如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。
如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。
要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false.
捕获阶段就是如第一部分所说的网页嵌套关系中的,从外到里的传递过程,而冒泡阶段就是从目标到最外层的传递过程,这个参数就是告诉监听事件在什么时刻触发。

冒泡阶段,内部元素的事件会先被触发,然后再触发外部元素。
捕获阶段,外部元素的事件会先被触发,然后才会触发内部元素的事件。

小结:
true 的触发顺序在 false 之前;
如果多个均为 true,则外层的触发先于内层;
如果多个均为 false,则内层的触发先于外层。

猜你喜欢

转载自www.cnblogs.com/qianphong/p/10562686.html