1

Ich arbeite an einem Projekt, wo ich einen EventListener an ein <audio> -Element für play -Ereignis und einen anderen eventListener an sein übergeordnetes Element für das gleiche Ereignis binden. Ich habe bemerkt, dass der Rückruf des Kindes immer angerufen wird, aber der Rückruf des Elternteils wird nie aufgerufen.Machen alle Ereignisse in Javascript Capture und Blase?

Wenn ich Capture-Modus von addEventListener() verwenden, dann werden beide Rückrufe normalerweise aufgerufen - zuerst Eltern, dann Kind.

Um weiter zu untersuchen, schrieb ich ein Stück Code und festgestellt, dass Play-Ereignis nicht zum Elternteil Blase.

<!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> 

und dies war der Ausgang

parent-click-capture 
child-click-capture 
child-click-bubble 
parent-click-bubble 
parent-play-capture 
child-play-capture 
child-play-bubble 

Wer weiß, ob dieses Verhalten nur von Spiel Veranstaltung ist insbesondere, oder gibt es andere Ereignisse, die (oder Erfassungsphase keine Blase Phase eintreten)

+3

Nicht alle Ereignisse blasen, Sie müssen die Spezifikationen für jedes Ereignis überprüfen, um festzustellen, ob es Blasenbildung unterstützt –

Antwort

1

Alle JS-Ereignisse geben die capture-Phase ein.

Ob ein Ereignis in die Phase bubble eintritt, kann durch Lesen der bubbles property des Ereignisses überprüft werden.

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