gpt4 book ai didi

javascript - Javascript 中的所有事件都会捕获并冒泡吗?

转载 作者:行者123 更新时间:2023-11-27 23:06:28 25 4
gpt4 key购买 nike

我正在开发一个项目,将一个 eventListener 绑定(bind)到 <audio> play 的元素event 和另一个 eventListener 到其父元素以获取同一事件。我注意到 child 的回调总是被调用,但 parent 的回调永远不会被调用。

如果我使用 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>

这是输出:

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

<小时/>

有谁知道这种行为是否仅适用于游戏事件,还是有其他事件不进入冒泡阶段(或捕获阶段)?

最佳答案

所有JS事件进入捕获阶段。

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

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

关于javascript - Javascript 中的所有事件都会捕获并冒泡吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36542744/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com