javascript - 如何监听触发的自定义事件并使用react？

Question

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

[编辑2]

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

[/编辑2]

[编辑]

这段代码很好地说明了我正在寻找的 DOM 感知系统的类型，感谢@Jared Farrish，还有延迟方法。 但我仍然认为这是一种 javascript 限制，并且该语言应该实现一种聪明的方法。理想情况下，子级不必执行父级或任何其他元素发出的命令。相反，子节点应该通过实时了解 DOM 事件中有趣的部分来做出自己的决定。

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!' 
});

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

document.dispatchEvent(warning);

通过执行上述语句，我想我对 document 说:“嘿伙计，请触发这个特定事件”。然后，事件被触发。据我了解，我认为这也意味着(以某种方式)DOM 知道该事件已被触发。

现在我想要另一个元素，即 body，每次触发事件 warning 时将 style.backgroundColor 从透明更改为红色。换句话说，我希望 body 能够监听这个特定的事件并做出相应的 react 。

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

但这行不通。

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

这是可以实现的吗？

注意:我今天发现了 Promise，并认为它们就是我正在寻找的东西，但它们并不是因为它们能够“链接”事物而无法延迟它们。 p>

Answer 1

你已经快明白了!然而，发生的情况是，您在 document 级别触发事件，而事件处理程序所在的 body 标记较低 - 触发时事件会冒泡。

如果您只是从 body 分派(dispatch)事件，您会看到它触发处理程序

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