2

我想CustomEvent用 Javascript 了解系统是如何工作的。

[编辑2]

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

[/EDIT2]

[编辑]

这段代码很好地说明了DOM我正在寻找的 -aware 系统的类型，感谢@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，style.backgroundColor每次warning触发事件时从透明变为红色。换句话说，我希望身体能够听到这个特定的事件并做出相应的反应。

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

但这不起作用。

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

这是可以实现的吗？

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

4

1 回答 1

2

你几乎明白了！但是，发生的情况是您正在触发document关卡上body的事件，而事件处理程序所在的标签较低 - 触发时事件会冒泡。

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

document.getElementsByTagName('body')[0].dispatchEvent(warning);
于 2015-04-05T23:58:14.027 回答