jQuery中如何调整事件执行顺序：点击li时优先触发ul的点击事件

浏览器的DOM事件流分为三个固定执行阶段：捕获阶段（从顶层DOM节点沿DOM树向下传播到触发事件的目标元素）、目标阶段（目标元素自身）、冒泡阶段（从目标元素沿DOM树向上传播回顶层节点）。
你当前用jQuery常规的.click()方法绑定的事件，默认全部挂载在冒泡阶段执行，所以点击li时的执行顺序为：先触发li自身的绑定事件，再向上冒泡触发父级ul的绑定事件，和你需要的优先级相反。
要实现父级ul事件优先执行，只需要将ul的事件绑定调整到捕获阶段触发即可——捕获阶段的事件会在事件向下传播到目标li之前就被触发，执行时机早于li自身的冒泡事件，刚好匹配你的优先级需求。

你当前使用的jQuery 1.4.2版本，不支持通过jQuery API配置捕获阶段的绑定参数，因此直接用原生addEventListener替换原来的ul绑定逻辑即可，li的绑定代码完全不需要改动：

// 替换原ul的jQuery绑定：第三个参数传true代表该事件在捕获阶段执行
document.querySelector("ul").addEventListener("click", function(){
  alert("Yeah I did it!");
}, true);

// 原有li的绑定逻辑保持不变
$("li").click(function(){
  alert("Noooooo!");
});

点击任意li时，事件执行的先后顺序为：

• 事件从顶层window沿DOM树向下传播，经过ul节点时触发绑定的捕获阶段事件，弹出Yeah I did it!
• 事件继续向下传播到目标li节点，触发li自身绑定的冒泡阶段事件，弹出Noooooo!

• 不要使用event.stopPropagation()来调整执行顺序：该方法会直接阻断后续所有事件流传播，改造后li的事件会完全失效，不符合预期
• 如果后续升级到jQuery 3.0及以上版本，也可以直接通过.on()方法传入最后一个捕获参数，不需要写原生JS代码完成同样的效果

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