/ js

从addEventListener说起js事件传递

addEventListener的第三个参数可以被当作是否使用capture模式的开关,默认不使用,即事件传递方法为冒泡传递。

冒泡的方法是从下到上,或者说从内到外,总是从event target开始向上一级一级传递。例如点击一个链接,冒泡传递是从a的DOM开始传递的,最终到了document(假如中间没有被禁止传递的话)。

在某些老浏览器上(例如IE9以下),这是唯一的事件传递方式。现代浏览器还支持capture方式传递事件。

capture是从最外层开始向内传递事件。

和事件相关的两个操作:preventDefaultstopPropagation,前者阻止事件默认行为发生,例如点击链接,默认行为是跳转到某页面,但如果调用preventDefault,则不会再跳转页面。不管是从内向外还是从外向内传递事件,事件的默认行为总是在事件传递结束后再执行的,如果不是这样,整个传递链条上的handler就不能有效处理事件了,例如从内向外传递,如果一开始默认行为就执行了,那上层的DOM根本无法阻止该事件发生与否了。

在传递过程中,每一层的事件处理方法(event handler)都可以阻止事件继续传递,调用stopPropagation可以阻止继续传递,即使阻止传递,DOM的默认行为仍然会执行

一个事件发生,传递方向会从最外层直到target,再执行target本身绑定的event handler,再由内到外传递。