【JS実用テクニック】バブルメカニズムを利用して、イベントバインディングを減らし、ページ性能を最適化する

引用する
初心者のベテランにかかわらず、フロントエンドの開発では、DOM要素にイベントをバインドして、いくつかの機能を実現することがよくあります.どのようにいくつかのJSの技巧を通じて、事件のバインドを減らして、ページの性能を最適化する目的を達成しますか?次に、イベントバインドの最適化に関する個人的な実践を紹介します.
私はできるだけ分かりやすく書いて、入門したばかりの人たちに助けてほしいと思っています.コメントや指摘を積極的に行い、アドバイスやアイデアを共有することも歓迎します.
イベントバインド利器:イベントバブルメカニズムの利用
ははは、安心して、私はブラウザのイベントのメカニズムの難解な理論を強制することはありません.
イベント伝播メカニズムは、さまざまなブラウザやバージョンで異なる可能性があります.違いの中でバランスポイントを探し、バブルメカニズムは突破口です.
ここでは,イベントバブル機構を用いてDOM元素にイベントをバインドする最適な実践を直接与えた.

理由その1:初期IEはバブルメカニズムのみであり、イベントを一括してバブルメカニズムでバインドすることで、最も厄介なIEブラウザ互換性の問題を解決した.

理由2:イベント伝播のバブル段階は、ページUIで見られる実態に最も近く、サブエレメントから親エレメントに段階的に伝播し、より直感的かつ分かりやすい.

理由3:動的に追加されたDOM要素については、直接イベントをバインドするには、要素作成後にのみ行う.しかし,イベントバブルメカニズムを利用すれば,この時点にこだわる必要はない.

≪インスタンス｜Instance｜emdw≫
あまり話さないで、直接実例に行きます(次の例は車輪を作らず、直接jqueryを使いましたね).
無秩序なリストがある場合は、特定のリスト項目をクリックすると、その項目のHTML内容をコンソールで印刷する必要があります.考え方は、DOM要素バインドイベント->要素HTMLの取得->コンソールに出力する方法です.

    
1
    
2
    ...

悪いイベントバインド:古いonclickプロパティを使用する

    

    

    ...

function handler(e) {
    console.log($(e).html());
}

うっかり怠け者さんが飛び出してきました:OKで終わり、任務を完成します!このようにしましょう.機能を実現できればいいです.
思考:これは最も古いイベントバインド方式で、JSとHTMLの分離ができず、メンテナンスに非常に不利で、潮流に従って淘汰される悪いやり方です.
しかし、今でもいくつかの中小規模のウェブサイト、教材、大学の授業で彼らの姿を見ることができると感嘆した.そして初心者たちは次々と真似をして、起点から多くの曲がり角を歩いて、私も来た人です(顔を覆っています).
良いイベントバインド:要素セットのマージバインドイベントを取得する

$('.list-item').on('click', function() { //            
    console.log($(this).html());
};

今回はJSとHTMLの分離を行い,まず要素集合を取得し,再利用jqueryのイベントバインディング手法on()を用いてブラウザイベントAPIの相違問題を解決した.
思考:100個のリスト項目があればjquery100回遍歴し,一致する要素集合に1個clickイベントをバインドする.この100回の遍歴とバインド操作だけで、リソースを非常に消費することができます.加えて、イベントリスニングが多すぎるため、ページのパフォーマンスにも影響します.
より良いイベントバインド:バブルメカニズムを使用して親要素を監視する

$('.list').on('click', 'li', function(event) { //         
    console.log($(event.target).html()); //        event.target  this，         
});

最適化後、リスニング関数を親要素に配置し、親要素の1つのイベントのみをリスニングすることで、数千万のリスト項目を制御します.バブルメカニズムを借りて、イベントバインドは100から1に最適化され、こんなに楽しかったです.ハハハ.
注意点&詳細解析:
使用on()メソッドのフィルタ
ここではon()メソッドの2番目のパラメータを用いたが、このパラメータはフィルタであり、例えばli>li・.list-item・li.list-item・.list-itemなどである.クリックイベントがこのフィルタで一致する要素から伝達されたことが検出されると、この親ノードのclickイベントコールバック関数がトリガーされます.
フィルタは使いませんliではありませんjquerycssクラスをフィルタとするとevent.target実行時に各classのlist-item属性を調べて、分割してみてliという名前があるかどうか見てみましょうから.歩奏が多くなったと判断した.この例では、thisを使用してフィルタリングするだけで、私たちのニーズを満たしています.最適化は詳細から始めましょう.
注意コールバック関数で動作するのはevent.targetそれともthis現在は親要素にバインドされているイベントなのでon()デフォルトでは親要素を指し、私たちのリスト項目ではありません.
ただしここで強調したいのは、jqueryメソッドのフィルタを使用して自動的にフィルタリングすると、thisevent.target指向をthisに変更してくれる場合があります.event.targetを使用することをお勧めします.混同を避け、コードをより明確にすることもできます.event.target・jqueryメソッドで提供されているフィルタを使用しない場合は、泡が出てきたのがliかどうかを自分で判断することもできます.

$('.list').on('click', function(event) {
    if (event.target.tagName === 'LI') { //        li，  tagName        
        console.log($(event.target).html());
    }
});

このようにon()メソッドの自動フィルタリングでも、直接自分でコードを書いて判断しても、統一的に使用できるon()バブル段階で伝播する具体的なリスト項目を取得することで、楽しく操作することができます.
締めくくり:現状に満足しない精神に重点を置く
ここで紹介したのはいくつかの小さな点だけで、先端開発で最適化できるところはまだたくさんあります.重要なのは精神的な面でのもので、現状に満足せず、考え、細部を重視しなければ、自分を少しずつ前に登らせない.
最後まで見てくれてありがとう、みんなで頑張りましょう!