Javascript 中的所有事件都会捕获并冒泡吗？答案

【问题标题】：Do all events in Javascript capture and bubble?Javascript 中的所有事件都会捕获并冒泡吗？
【发布时间】：2016-04-11 07:46:58
【问题描述】：

我正在做一个项目，我将一个 eventListener 绑定到 <audio> 元素以用于 play 事件，并将另一个 eventListener 绑定到其父元素以用于同一事件。我注意到孩子的回调总是被调用，但父母的回调从来没有被调用过。

如果我使用addEventListener() 的捕获模式，那么两个回调都会正常调用 - 首先是父级，然后是子级。

为了进一步调查，我写了一段代码，发现 play 事件不会冒泡返回给父级。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div><audio src="song.mp3" controls="true"></audio></div>
</body>
<script type="text/javascript">
    parent = document.querySelector('div');
    child = document.querySelector('div audio');

    parent.addEventListener('click', function() {console.log('parent-click-capture');}, true);
    parent.addEventListener('click', function() {console.log('parent-click-bubble');}, false);
    parent.addEventListener('play', function() {console.log('parent-play-capture');}, true);
    parent.addEventListener('play', function() {console.log('parent-play-bubble');}, false);

    child.addEventListener('click', function() {console.log('child-click-capture');}, true);
    child.addEventListener('click', function() {console.log('child-click-bubble');}, false);
    child.addEventListener('play', function() {console.log('child-play-capture');}, true);
    child.addEventListener('play', function() {console.log('child-play-bubble');}, false);
</script>
</html>

这是输出：

父级点击捕获
子点击捕获
子点击气泡
父级点击气泡
父母游戏捕获
儿童游戏捕捉
孩子玩泡泡

有谁知道这种行为是否仅针对播放事件，或者是否还有其他未进入冒泡阶段（或捕获阶段）的事件？

【问题讨论】：

并非所有事件都冒泡，您需要检查每个事件的规范，看它是否支持冒泡

标签： javascript jquery dom-events event-bubbling event-capturing

【解决方案1】：

所有JS事件进入capture阶段。

可以通过读取事件的bubbles property来检查事件是否进入bubble阶段。

element.addEventListener('ACTION', (e) => console.log(e.bubbles))

【讨论】：