Clever Geek Handbook

AngularJSのイベント委任。 それを理解しよう

エフゲニー・グリシュコヴェッツ、劇「犬の食べ方」 グリシュコベッツは、それがそうであるように、「それを理解しよう」



記事へのコメントで、ハンドラーを要素のグループに割り当てる必須の方法は多くの人によく知られているという事実の文脈で、AngularJSの委任について質問しました。 



$('ul').on('click', 'li', function(){ //  ....


宣言的なAngularJSでは完全に受け入れられません。 実際、委任の問題を解決するために私の指示を使用することを勧められました。 実際、賢明なことは何も思いつかず、グーグルで検索することにしました。このオプションに出くわしました。リスナーを登録する必要な要素のグループの親ノードにインストールする必要があるディレクティブを作成します。

これがデモです。

そして、ここに私たちの興味を引く2つのコードがあります： 
 html <ul bn-delegate="li a | selectFriend( friend )"> <li ng-repeat="friend in friends"> <!-- Delegate target. --> <a href="#">{{ friend.name }}</a> <!-- Delegate target. --> </li> </ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     




 //js element.on( "click.bnDelegate", selector, function( event ) { // Prevent the default behavior - this is // not a "real" link. event.preventDefault(); // Find the scope most local to the target // of the click event. var localScope = $( event.target ).scope(); // Invoke the expression in the local scope // context to make sure we adhere to the // proper scope chain prototypal inheritance. localScope.$apply( function() { expressionHandler( localScope ); } ); } );




しかし、待ってください。 依存関係では、jQueryが取得されます（ただし、jQueryなしで実行できますが、それでも問題ありません）。 ディレクティブの荒野では、依然として同じ命令型のアプローチです。 実際、この時点で、Angularでの委任へのアプローチを理解しようとして、投稿を公開することにしました。これについて何かコメントをお持ちの方はコメントをお勧めします。



状況を明確にするために、この問題に出会いました。 ユーザーの要求に応じて、ng-repeatを使用して、パフォーマンスを向上させる動機を付けて 、イベントを親要素に自動的にバインドする機能がパフォーマンス分析のために送信されました。



画像



その結果、この同志は、彼が「簡単な」テストを行い、 バイオリニストが正しくないこと、彼が必要ではないことを確認したと言った。 トピックはクローズド、悲しみです。



委任の長所と短所を比較検討すると、判明

長所：

  • 初期化を簡素化し、メモリを節約します。多くのハンドラをハングアップする必要はありません。
  • 少ないコード：要素を追加または削除するときに、ハンドラーを設定または削除する必要はありません。
  • 変更の容易さ：innerHTMLを変更することで、要素を大幅に追加または削除できます。




短所：

  • まず、イベントが表示されます。 ほとんどのイベントがポップアップしますが、すべてではありません。
  • 第二に、委任は、イベントがコンテナ内のどこかで発生したときにハンドラが起動されるため、ブラウザに追加の負荷を作成します。必ずしも関心のある要素ではありません。

    しかし、通常、この負荷は小さく、問題ではありません。






実際、私は現実に近いテストを思い付くことができませんでした;基本的な例では、違いは絶対に見えません。 したがって、委任を使用する必要があるかどうかをコメントで議論することをお勧めしますか？



ソース：

www.bennadel.com/blog/2448-Using-jQuery-Event-Delegation-In-AngularJS.htm

github.com/angular/angular.js/issues/1568

learn.javascript.ru/event-delegation


More articles:


All Articles