MooTools - 以编程方式触发不与事件委派一起使用的事件 [英] MooTools - Programmatically fired events not working with event delegation

问题描述

如果有人能帮助我找出为什么我无法在MooTools中使用事件委派（从Element.Delegation类）以编程方式触发事件，我将非常感激。

Would really appreciate if anyone can help me figure out why I am unable to fire events programmatically when using event delegation in MooTools (from the Element.Delegation class).

有一个父< div> 在某个孩子<上有一个更改听众;输入> 元素。当用户操作触发更改事件时，父div上的处理程序会被触发，但是当我在任何子输入上使用 fireEvent 以编程方式触发它时，没有任何反应。基本设置是：

There is a parent <div> that has a change listener on some child <input> elements. When the change event is triggered by user actions, the handler on the parent div gets triggered, but when I fire it programmatically with fireEvent on any child input, nothing happens. The basic setup is:

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

js

js

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

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

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

The event handler on the parent div does not get called. Any help is appreciated. Cheers!

相关问题：用 fireEvent 触发事件在DOM树中泡泡了吗？我当前的黑客是本地发送有效的事件（但仍然是黑客） - http://jsfiddle.net / SZZ3Z / 1 /

Related question: Do events triggered with fireEvent bubble at all in the DOM tree? My current hack is to dispatch the event natively which is working (but a hack nonetheless) - http://jsfiddle.net/SZZ3Z/1/

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

推荐答案

这也行不通很好'原样'。事件冒泡（以及事件的程序化触发）的问题是它可能需要事件对象为真实，以便它包含 event.target 即与中继字符串匹配。此外， document.id（color）。fireEvent（）将无效，因为颜色本身没有附加任何事件。

this won't work too well 'as is'. the problem with event bubbling (and with programmatic firing of events) is that it may need the event object to be 'real' in order for it to contain event.target that is being matched against the relay string. also, document.id("color").fireEvent() won't work as color itself has no event attached to it.

为了解决这个问题，你通过传递包含目标元素的事件对象来伪造父侦听器上的事件，如下所示：

to get around this, you fake the event on the parent listener by passing an event object that contains the target element like so:

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

行动中的观点： http://www.jsfiddle.net/xZFqp/1/

如果您执行event.stop之类的操作在你的回调函数中，你需要传递 {target：document.id（color），stop：Function.from} 等等，你可以使用任何事件方法引用，但事件委托代码现在只对目标感兴趣。

if you do things like event.stop in your callback function then you need to pass on {target: document.id("color"), stop: Function.from} and so forth for any event methods you may be referencing but the event delegation code is only interested in target for now.

这篇关于MooTools - 以编程方式触发不与事件委派一起使用的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！