如何在JavaScript中实现指定顺序的alert触发？自定义点击序列需求

首先得确认你的DOM结构是嵌套层级的（比如外层a，中间c，最内层b——也就是你说的黄色盒子），因为事件的冒泡/捕获机制只作用在嵌套的DOM元素上，兄弟元素之间不会触发彼此的事件处理器。

你的代码问题分析 #

你当前给b设置了捕获阶段监听，理论上如果DOM是a > c > b的嵌套结构，点击b时应该会先触发bHandler（捕获阶段），然后冒泡到c触发cHandler，最后到a触发aHandler，刚好符合你的需求。但如果实际顺序不对，大概率是DOM结构不符合嵌套要求，或者监听的阶段设置有冲突。

更稳妥的实现方式 #

要确保严格按bHandler→cHandler→aHandler的顺序触发，我们可以利用目标阶段优先触发+事件冒泡的特性，代码如下：

function aHandler(){ alert('aHandler'); }
function bHandler(){ alert('bHandler'); }
function cHandler(){ alert('cHandler'); }

// 外层a：冒泡阶段监听，最后触发
document.getElementById("a").addEventListener("click", aHandler);
// 目标元素b：默认冒泡监听（目标阶段触发，最先执行）
document.getElementById("b").addEventListener("click", bHandler);
// 中间层c：冒泡阶段监听，在b之后触发
document.getElementById("c").addEventListener("click", cHandler);

原理说明 #

当你点击b时：

1. 捕获阶段：从最外层a到目标b遍历，因为我们没给a和c设置捕获监听，所以这个阶段没有事件触发；
2. 目标阶段：触发目标元素b的事件处理器，也就是bHandler；
3. 冒泡阶段：事件从目标b向上冒泡到父元素c，触发cHandler，再继续冒泡到最外层a，触发aHandler。

这样就完美实现了你想要的顺序。如果你的DOM结构是其他嵌套方式（比如b是中间层，包裹着c，同时被a包裹），只需要保证触发事件的元素是内层，需要后续触发的元素是它的父级，然后按上述方式设置监听即可。

内容的提问来源于stack exchange，提问作者user944513