プロジェクトで JS イベント委任を使用する方法-jsチュートリアル-php.cn

プロジェクトで JS イベント委任を使用する方法

php中世界最好的语言

リリース： 2018-06-09 11:53:09

オリジナル

1534 人が閲覧しました

今回はプロジェクトでJSイベントデリゲーションを使用する方法と、プロジェクトでJSイベントデリゲーションを使用する際の注意点について説明します。以下は実践的なケースですので見てみましょう。

日常生活の中で、イベント委任の概念を聞くことがあります。一部の学生はイベント委任についてすでによく知っているかもしれませんし、一部の学生はイベント委任について聞いたことがなく、簡単な使用方法しか知らないかもしれません。イベントの代表者、よくわかりません。したがって、このブログ投稿では、ネイティブ JS におけるイベント委任の原理、イベント委任が存在する理由、イベント委任がこの方法で使用できる理由、およびその他の問題について説明します。

1. js でのイベントフロー

イベントデリゲートを解析する前に、js でのイベントフロー、つまりバブリングとキャプチャを確認してみましょう。

① .バブリング: 下位レベルのノードがイベントをトリガーすると、そのイベントは上位レベルのノードで同様のイベントを段階的にトリガーします。

② .Capture: バブリングと似ていますが、イベントの順序が逆になります。つまり、上位ノードから下位ノードに渡されます

2. イベントデリゲーションの原理

イベントデリゲーションは、イベントバブリングを利用して親要素にイベントを追加します。または祖先要素をトリガーします。

<body>
  <p id="myp">
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
  </p>
</body>
<script type="text/javascript">
  document.getElementById("myp").onclick=function(e){
    e=window.event||e;
    var btnId=e.target.id;
    switch(btnId){
      case "btn1":
        console.log("按钮1");
      break;
      case "btn2":
        console.log("按钮2");
      break;
      case "btn3":
        console.log("按钮3");
      break;
    }
  }
</script>

ログイン後にコピー

上記のコードは、典型的なイベント委任のケースです。利用の原則は、イベントのバブリング、イベントの親要素へのロード、およびイベントパラメーターを介したボタンの区別です

3. 概要

上記のイベント委任コードを観察すると、イベント委任には利点があると簡単に結論付けることができます。 :

①. ページイベントバインディングの数が増えるとページの実行パフォーマンスが低下するため、イベントデリゲーションによりページの動的変更を柔軟に処理できます。このシナリオでは、子ノードが増加しても減少しても、イベントを再バインドする必要はありません

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注目してください。 PHP 中国語 Web サイトの他の関連記事へ!

推奨読書:

Webpackのリフレッシュ解析機能の使用

実際のプロジェクトでインストールプラグインを使用する方法

以上がプロジェクトで JS イベント委任を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。