7

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

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

html

<div id="listener">
    <input type="text" id="color" class="color" />
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&lt;/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
4

2 回答 2

16

这不会“按原样”工作得很好。事件冒泡（以及事件的编程触发）的问题在于它可能需要事件对象是“真实的”，以便它包含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。

于 2010-04-22T10:35:23.460 回答
0

我是这样解决的：

document.addEvents({
    'click:relay(.remove_curso)': function(){
        document.fireEvent('_remove_curso', this);
    },
    '_remove_curso':function( me ){
        console.log( me );
    }.bind( this )
}
于 2012-11-17T23:57:31.907 回答