在JavaScript中，事件处理程序的执行顺序是由它们注册的顺序决定的。当一个事件被触发时，浏览器根据事件类型和处理程序注册的方式来确定哪个事件处理程序应该首先执行。
事件流
在深入了解事件优先级之前，我们需要理解事件流的概念。事件流描述的是从页面接收事件的顺序。在DOM中有两种事件流：冒泡和捕获。
冒泡
在事件冒泡中，事件会从被点击的元素开始向上冒泡，直到达到document对象。假设你有一个包含3个嵌套div的HTML文档，并在其中最后一个div添加了单击事件监听器：
---- -----------
---- ------------
---- -----------
------
------
------
--------
--- ----- - ---------------------------------
--- ------ - ----------------------------------
--- ----- - ---------------------------------
------------------------------- ---------- -
------------------ ----------
---
-------------------------------- ---------- -
------------------- ----------
---
------------------------------- ---------- -
------------------ ----------
---
---------如果你在inner div上单击，那么先执行inner的事件处理程序，然后执行middle的，最后执行outer的。这就是事件冒泡的顺序。
捕获
在事件捕获中，事件从document对象开始向下传递，直到达到被点击的元素。如果你在inner div上单击，那么首先执行outer的事件处理程序，然后是middle的，最后才是inner的。
---- -----------
---- ------------
---- -----------
------
------
------
--------
--- ----- - ---------------------------------
--- ------ - ----------------------------------
--- ----- - ---------------------------------
------------------------------- ---------- -
------------------ ----------
-- ------
-------------------------------- ---------- -
------------------- ----------
-- ------
------------------------------- ---------- -
------------------ ----------
-- ------
---------上面的代码演示了事件捕获的顺序。
事件优先级
当一个元素上注册了多个事件处理程序时，浏览器会按照以下顺序依次执行它们：
- 当前元素的捕获阶段事件处理程序。
- 祖先元素的捕获阶段事件处理程序，由外向内依次执行。
- 目标元素的事件处理程序。
- 祖先元素的冒泡阶段事件处理程序，由内向外依次执行。
- 当前元素的冒泡阶段事件处理程序。
这意味着当前元素的事件处理程序总是最先执行，然后是其祖先元素的事件处理程序（以捕获的顺序），最后是它们的孩子元素的事件处理程序（以冒泡的顺序）。
---- -----------
---- ------------
---- -----------
------
------
------
--------
--- ----- - ---------------------------------
--- ------ - ----------------------------------
--- ----- - ---------------------------------
------------------------------- ---------- -
------------------ ----------
-- ------
-------------------------------- ---------- -
------------------- ----------
-- ------
------------------------------- ---------- -
------------------ ----------
-- ------
------------------------------- ---------- -
------------------ ---------
---
-------------------------------- ---------- -
------------------- ---------
---
------------------------------- ---------- -
------------------ ---------
---
---------在上面的代码示例中，当你在inner div上单击时，先执行捕获阶段的事件处理程序
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/15625