如何监听触发的 CustomEvent 并做出反应？

Question

我想了解 CustomEvent 系统在 Javascript 中的工作原理。

[EDIT2]

梦想解决方案在这里：http://www.html5rocks.com/en/tutorials/es7/observe/

[/EDIT2]

[编辑]

这段代码很好地说明了我正在寻找的 DOM 感知系统的类型，感谢@Jared Farrish，还有延迟方法。但我仍然认为这是一种 javascript 限制，该语言应该以一种巧妙的方式实现。理想情况下，children 不必执行 parent 或任何其他元素给出的命令。相反，child 节点应该通过在 real-time 中了解 DOM activity.

的有趣部分来做出自己的决定

var body = document.body,
    btn = document.getElementById('fire'),
    warn;

    warn = document.createEvent('CustomEvent');
    warn.initEvent('warning', true, true);

body.addEventListener('warning', function() {
    body.style.backgroundColor = 'blue';
});

btn.addEventListener('warning', function() {
    this.style.backgroundColor = 'green';
});

btn.addEventListener('click', function init() {
    body.dispatchEvent(warn);
    btn.dispatchEvent(warn);
});

来源：http://jsfiddle.net/p6myjLza/2/

[/编辑]

说我创建了这个非常基本的事件：

var warning = new CustomEvent('warning', { 
    'detail': 'This is a warning!' 
});

现在 object warning 包含有用的数据。它存储在浏览器内存中。让我们触发它。

document.dispatchEvent(warning);

通过上面的语句，我想我对 document 说："hey dude, fire this specific event plz"。然后，事件被触发。据我所知，我认为这也意味着（以某种方式）DOM 知道事件已被触发。

现在我想要另一个元素，说 body，每次触发事件 warning 时，将 style.backgroundColor 从反式 parent 更改为红色。换句话说，我希望 body 收听此特定事件并做出相应反应。

document.getElementsByTagName('body')[0].addEventListener('warning',
function(e){
    this.style.backgroundColor = 'red';
}, false);

但这行不通。

实际上，如果我通过在第一个之前初始化第二个来切换 dispatchEvent() 和 addEventListener() 的位置，它就可以工作。但这不是我对 Javascript 的期望。我想要实现的是能够在某处触发事件，并在其他地方订购某个元素来捕获它并在每次触发此事件时做出反应。

这是可以实现的吗？

注意：我今天发现了 promises 并认为它们就是我要找的东西，但它们并不是因为它们能够 "chain" 事情而不能延迟它们。

Answer 1

你快搞定了！但是，发生的情况是您在 document 级别触发事件，而事件处理程序所在的 body 标记较低 - 事件在触发时冒泡。

如果您只是从 body 发送事件，您会看到它触发了处理程序

document.getElementsByTagName('body')[0].dispatchEvent(warning);

如何监听触发的 CustomEvent 并做出反应？

How to listen and react on triggered CustomEvent?

javascript

eventtrigger

addeventlistener

dispatchevent

custom-events