2

私は、1 つの eventListener をイベントの<audio>要素にバインドしplay、別の eventListener を同じイベントの親要素にバインドするプロジェクトに取り組んでいます。子のコールバックは常に呼び出されますが、親のコールバックは呼び出されないことに気付きました。

のキャプチャ モードを使用するとaddEventListener()、両方のコールバックが正常に呼び出されます。最初は親、次に子です。

さらに調査するために、コードを書いたところ、再生イベントが親にバブルバックしないことがわかりました。

<!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 に答える