2

我正在开发一个项目，在该项目中，我将一个 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>

这是输出：

父单击捕获
子单击捕获
子单击气泡
父单击气泡
父播放捕获
子播放捕获
子播放气泡

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

4

1 回答 1

2

所有 JS 事件进入capture阶段。

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

element.addEventListener('ACTION', (e) => console.log(e.bubbles))
于 2017-06-16T19:18:43.043 回答