JavaScriptイベントデリゲーション技術事例 分析_JavaScriptスキル

この記事では、例を示しながら JavaScript イベント委任テクノロジを分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ページ全体に多数のボタンがある場合、各ボタンにイベント ハンドラーをバインドする必要があります。これはパフォーマンスに影響します。

まず、すべての関数はオブジェクトであり、オブジェクトはメモリ内のオブジェクトの数が増えるほど、パフォーマンスが低下します。

第 2 に、DOM アクセス数の増加はページの読み込みの遅延につながります。実際、イベント ハンドラーを有効に活用するための優れた解決策がまだあります。

イベントデリゲート:

イベント ハンドラーが多すぎる問題の解決策は、イベント委任テクノロジです。

イベント委任テクノロジは、イベント ハンドラーを指定するだけでイベント バブリングを利用します。

イベントをトリガーする必要がある親要素にイベント ハンドラーをバインドできます。

<ul id="mylist">    
  <li id="li_1">sdsdsd</li>    
  <li id="li_2">sdsdsd</li>    
  <li id="li_3">sdsdsd</li>
</ul>

次に、これら 3 つの li のイベント ハンドラーをバインドする必要があります。

ul でイベント ハンドラーをバインドするだけで済みます。

obj.eventHandler($("mylist"),"click",function(e){
  e = e || window.event;
  switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
 case "li_1":
 alert("li_1");
 break;
 case "li_2":
 alert("li_2");
 break;
 case "li_3":
 alert("li_3");
 break
  }
})

複雑な Web アプリケーションの場合、この種のイベント委任は非常に実用的です。

このメソッドを使用しない場合、それらを 1 つずつバインドすると、無数のイベント ハンドラーが生成されます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。