MooToolsイベント委譲：コールバック内で子要素を参照する方法HTMLのこの部分を持つ

Question

：

<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 selectのイベントを起動し、コールバック内の各イベントへの参照を持っていきたいと思います。どうすればいいですか？ これはフィドルです：http://jsfiddle.net/EWUCG/5/ 多くの感謝！ IRCチャンネルでチャットから

Answer 1

これは後に...私は上のIRCでこれを取り上げているものもあり誰がそれを提供したかをあなたに伝えることはできません。

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

、より良いコードの再利用のための要素法 - http://jsfiddle.net/prbNK/12/

Answer 2

$$('.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'); 

Answer 3

は：

• イベントの代表団は、イベントバブルのオフに基づいています。
• 親の中の要素がイベントをトリガーします。それは親ノードのイベントをトリガーします...
• これ以上親（ウィンドウ）がなくなるまでそれを行います
• 親の1人が受け取ったときにコールバックを設定するだけですそのイベントはその子供から渡されました。

私が残した唯一の解決策は、「eaching」されています

$('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/