MooTools - события, запускаемые программным способом, не работают с делегированием событий.

Question

Буду очень признателен, если кто-нибудь поможет мне понять, почему я не могу запускать события программно при использовании делегирования событий в MooTools (из класса Element.Delegation).

Существует родительский элемент <div>, у которого есть change прослушиватель для некоторых дочерних <input> элементов. Когда событие изменения инициируется действиями пользователя, запускается обработчик на родительском элементе div, но когда я запускаю его программно с fireEvent для любого дочернего ввода, ничего не происходит. Базовая настройка:

HTML

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

1012 * 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.

Answer 2

Я решил это так:

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