如何确定javascript中事件监听器的顺序?

时间:2016-07-21 15:23:29

标签: javascript onclick event-handling mouseevent mouselistener

假设有一个div包含一个链接(一个href),并且有三个事件监听器 - on-click- 1)用于整个页面,2)在div 3)一个标签。如果用户单击a标签,那么如何触发侦听器?他们被登记的顺序是什么?

1 个答案:

答案 0 :(得分:3)

基本上,这取决于。事件分为两个阶段,捕获(首先发生),文档记录下来,然后冒泡,然后元素上升。

JS可以同时执行这两个操作,这就是为什么在创建自定义事件时,您会听到第三个布尔变量,例如:

parent.addEventListener('click',doSomething2,true) child.addEventListener('click',doSomething,false)

如果它的最后一个参数为true,则为捕获阶段设置事件处理程序,如果为false,则为冒泡阶段设置事件处理程序。

返回示例代码并引用this page

  

如果用户点击子元素,则会发生以下情况:

     
      
  1. 点击事件在捕获阶段开始。该事件查看子元素的任何祖先元素是否具有捕获阶段的onclick事件处理程序。

  2.   
  3. 该事件在父级上找到一个。执行doSomething2()。

  4.   
  5. 事件向下移动到目标本身,不再找到捕获阶段的事件处理程序。事件进入冒泡阶段并执行doSomething(),该事件已注册到子项以进行冒泡阶段。

  6.   
  7. 事件再次向上移动并检查目标的任何祖先元素是否具有冒泡阶段的事件处理程序。事实并非如此,所以没有任何反应。

  8.   

我上面链接的页面提供了更多信息,但希望能回答基本问题。