Question

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

[EDIT2]

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

[/ EDIT2]

[编辑]

这段代码很好地说明了我正在寻找的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说：＆＃34;嘿伙计，解雇这个特定的事件PLZ＆＃34;。然后，事件被触发。根据我的理解，我认为这也意味着（不知何故）DOM知道事件已被触发。

现在我想要另一个元素，即身体，每次触发事件style.backgroundColor时，从{透明到红色“的变化都是warning。换句话说，我希望身体能够倾听这一具体事件并做出反应。

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

但这不起作用。

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

这是可以实现的吗？

注意：我今天发现了承诺并认为它们是我正在寻找的东西，但它们并不像他们只是能够连接＆＃34;事情无法延迟。

Answer 1

你差不多了！然而，发生的事情是，您在document级别上触发事件，并且事件处理程序所在的body标记较低 - 触发时事件会冒泡。

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

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

如何监听和响应触发的CustomEvent？

1 个答案: