1
Bir eventListener öğesini play olayı için <audio> öğesine ve aynı olay için ana öğesinin başka bir eventListener öğesine bağlandığım bir proje üzerinde çalışıyorum. Çocuğun geri çağrısının her zaman çağrıldığını fark ettim, ancak ebeveynin geri aranması hiç bir zaman çağrılmadı.Javascript yakalama ve kabarcıktaki tüm etkinlikler yapın?
Yakalama modunu addEventListener() kullanırsam, her ikisi de normal olarak çağrılır - önce üst, sonra alt öğe.
Daha fazla araştırmak için bir parça kod yazdım ve o oyun etkinliğinin ana bilgisayara geri dönmediğini gördüm.
<!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>
Ve bu çıktı üretmesi oldu
parent-click-capture
child-click-capture
child-click-bubble
parent-click-bubble
parent-play-capture
child-play-capture
child-play-bubble
bu davranış sadece oyun olayın özellikle bir veya kabarcık fazı (ya da yakalama aşaması girmeyin orada başka olaylar ise
bilen var mı
Tüm olaylar kabarcıkları yok, köpürmeyi destekleyip desteklemediğini görmek için her bir olayın özelliklerini kontrol etmeniz gerekir. –