JavaScriptイベントデリゲーション技術事例分析_JavaScriptスキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:15:26

オリジナル

1093 人が閲覧しました

この記事では、例を示しながら 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 プログラミング設計に役立つことを願っています。