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

Question

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

有一个父 <div> 在某些子 <input> 元素上有一个 change 侦听器。当用户操作触发更改事件时，父 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 树中冒泡？我目前的 hack 是在本地调度正在运行的事件（但仍然是 hack）-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

我是这样解决的：

document.addEvents({
    'click:relay(.remove_curso)': function(){
        document.fireEvent('_remove_curso', this);
    },
    '_remove_curso':function( me ){
        console.log( me );
    }.bind( this )
}