MooTools - 以编程方式触发不与事件委派一起使用的事件

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.