gpt4 book ai didi

javascript - 是否可以广播自定义事件?

转载 作者:行者123 更新时间:2023-11-30 15:57:20 31 4
gpt4 key购买 nike

我有一个如下所示的设置,其中 body 内的所有三个元素都订阅了某个事件 ( relevant code pen ):

var div = document.querySelector('div');
var span = document.querySelector('span');
var button = document.querySelector('button');

div.addEventListener('ding', function() {
console.log('click');
});

span.addEventListener('ding', function() {
console.log('clack');
});

button.addEventListener('ding', function() {
console.log('bang');
});

document.body.dispatchEvent(new CustomEvent('ding')); // ???
// expected output: 'click clack bang'
<body>
<div></div>
<span></span>
<button></button>
</body>

据我所知,CustomEvent 冒泡而不向下滴流,这可能是我需要的。是否有可能分派(dispatch)一个 CustomEvent 以便所有三个处理程序都将触发?

最佳答案

您必须分别对三个元素中的每一个元素触发事件。但是,您可以在 document.body 上使用 addEventListener(),以便在 document.body.dispatchEvent( new CustomEvent('ding')); 被调用。

例子:

var div = document.querySelector('div');
var span = document.querySelector('span');
var button = document.querySelector('button');

div.addEventListener('ding', function() {
console.log('click');
});

span.addEventListener('ding', function() {
console.log('clack');
});

button.addEventListener('ding', function() {
console.log('bang');
});

document.body.addEventListener('ding', function() {
div.dispatchEvent(new CustomEvent('ding'));
span.dispatchEvent(new CustomEvent('ding'));
button.dispatchEvent(new CustomEvent('ding'));
});

document.body.dispatchEvent(new CustomEvent('ding'));
<body>
<div></div>
<span></span>
<button></button>
</body>

关于javascript - 是否可以广播自定义事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38301520/

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