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

Question

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

有一个父

，它在某些子 元素上有一个 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 树中是否会冒泡？我当前的黑客是本地调度正在运行的事件（但仍然是黑客） - http://jsfiddle。网/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")
});

view in action: 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 )
}