以编程方式触发的事件不适用于事件委托

Question

如果有人能帮助我弄清楚为什么在MooTools中使用事件委托（来自Element.Delegation类时）无法以编程方式激发事件，我将非常感激。

有一个父级<div>，在某些子级change元素上具有一个<input>侦听器。当更改事件由用户操作触发时，父div上的处理程序将被触发，但是当我以编程方式在任何子输入上使用fireEvent触发它时，则不会发生任何事情。基本设置是：

html

<div id="listener">
    <input type="text" id="color" class="color" />
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​

js

$("listener").addEvent("change:relay(.color)", function() {
    alert("changed!!");
});

$("color").fireEvent("change"); // nothing happens

不调用父div上的事件处理程序。任何帮助表示赞赏。

---

相关问题：fireEvent触发的事件在DOM树中是否完全冒泡？我当前的破解方法是在本地分发正在运行的事件（尽管如此，但仍然是黑客）-http://jsfiddle.net/SZZ3Z/1/

var event = document.createEvent("HTMLEvents")
event.initEvent("change", true);
document.getElementById("color").dispatchEvent(event); // instead of fireEvent

Answer 1

这无法按原样运作。事件冒泡（以及事件的编程触发）的问题在于，它可能需要使事件对象为“真实”，才能使其包含与中继字符串匹配的event.target。同样，document.id("color").fireEvent()将不起作用，因为颜色本身没有附加任何事件。

要解决此问题，您可以通过传递包含目标元素的事件对象来在父侦听器上伪造该事件，如下所示：

document.id("listener").fireEvent("change", {
    target: document.id("color")
});

观看中：http://www.jsfiddle.net/xZFqp/1/

[如果您在回调函数中执行诸如event.stop之类的操作，那么您需要传递{target: document.id("color"), stop: Function.from}等有关可能引用的任何事件方法的信息，但是事件委托代码目前仅对target感兴趣。] >

Answer 2

我这样解决：