Делегирование события MooTools: как ссылаться на дочерний элемент внутри обратного вызова?

Question

Имея этот фрагмент HTML:

<div id="modal">
    <select class="country">
        <option value=""></option>
        <option value="opt">Opt</option>
    </select>
</div>

И этот фрагмент JS:

$('modal').addEvent('change:relay(.country)', function(){
    console.log(this); // "this" refers to #modal.
}).fireEvent('change:relay(.country)');

Журнал показывает, что ключевое слово this относится к элементу #modal.Я хочу запустить событие для каждого выбора .country и иметь ссылку на каждый внутри обратного вызова.Как я могу иметь это?Это скрипка: http://jsfiddle.net/EWUCG/5/ Большое спасибо!

Answer 1

Из чата на IRC-канале:

• Делегирование события основано на пузырьковом событии.
• Таким образом, элемент внутри родителя будет инициировать событие.Затем он будет запускать события в своем родительском узле ...
• он делает это до тех пор, пока не останется больше родителей (окно)
• Так что вы действительно просто устанавливаете обратный вызов, чтобы он происходилкогда один из родителей получает событие, переданное от его ребенка.

Единственное решение, которое я оставил, - это «каждый»:

$('modal').addEvent('change:relay(.country)', function(event, target){
    console.log(this, event, target); // Then "this" refers to each .country select.
});
$$('.country').each(function(el){
    $('modal').fireEvent('change', [null, el]);
});

Скрипка: http://jsfiddle.net/EWUCG/12/

Answer 2

Это может быть то, что вам нужно ... Я поднял это в IRC более года назад и не могу сказать вам, кто его предоставил.

http://jsfiddle.net/prbNK/7/

иЭлементный метод для лучшего повторного использования кода - http://jsfiddle.net/prbNK/12/

Answer 3

$$('.country').addEvent('change', function(){

    console.log(this);
    // "this" refers to select

    console.log(this.getElement(':selected'));
    // this.getElement(':selected') refers to selected option

}).fireEvent('change');