2013-04-23 8 views
6

ページ上のアンカー要素に加えられたすべてのクリックを聞きたいとします。ページ上のアンカーは、ページの有効期間中に動的に追加/削除され、新たに追加された場合でもすべてのクリックイベントを登録する必要があります。dart SDKにイベントデリゲーションがありますか?

標準的なライブラリを使用してDartでデリゲートされたイベント(jQueryなど)を添付する方法はありますか?

jQueryではelement.on('click', '.selector', handler);でこれを達成できます。

+0

悲しいことに、いや、私も作りました私たちのアプリでヘルパーメソッドが、実際のソリューションはダーツでこれを持っている:あなたやったようなHTMLやPubパッケージです。 –

答えて

7

あなたは今、このようなElementStream.matchesでそれを行うことができます。

document.body.onClick.matches('.selector').listen((Event event) { 
    print('Super cool!'); 

    // The currently registered target for the event 
    // document.body 
    event.currentTarget; 

    // The element whose CSS selector matched 
    // .selector 
    event.matchingTarget; 

    // The target to which the event was originally dispatched 
    // the real element clicked under .selector 
    event.target; 
}); 
+0

それは面白いです。それはどのくらい正確に機能しますか? 'event.target'には何が入りますか? 'div class = 'selector''の中に' があります。 '要素です。今私たちが興味を持っていることができる3つの要素があります:私が聞いているbody要素(入手しやすい)、ii)一致する '.selector'要素、iii)' '要素です。クリックを受け取りました。これらのうちどれが 'event.target'にありますか?何とか他のものを得ることは可能ですか? –

+0

私はちょうど簡単なテストをメイドしました: 'e.currentTarget'は' document.body'を指し、 'e.target'は' を指します。 '。 '.selector'にマッチする要素を取り出すことはできないと思います。なぜなら、複数の' .matches'メソッドが連鎖する可能性があるからです。 jQueryはこれをどのように処理しますか? –

+0

jQueryでは、委譲されたイベントのハンドラに渡される 'event'オブジェクトに3つのプロパティがあります:' event.target' - ' Click me! '、' event.currentTarget' - '.selector'、' event.delegatedTarget' - 'document.body'のように、http://jsfiddle.net/d2fvW/の例を調べることができます。 jQueryの 'event.currentTarget'と同等ですが、委譲機能をかなり使用できなくします:-( –

2

実行可能な解決策が見つからないため、私は委任を可能にするパッケージを作成しました。あなたは http://pub.dartlang.org/packages/delegate

コードでそれを見つけることができます

は単純です:

delegate(parent, condition, handler) { 
    return (event) { 
    var element = event.target; 
    while (element != parent && element != null) { 
     if (condition(element)) { 
     handler(event, element); 
     } 
     element = element.parent; 
    } 
    }; 
} 

delegateOn(parent, String eventType, condition, handler) { 
    parent.on[eventType].listen(delegate(parent, condition, handler)); 
} 
関連する問題