ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptイベント委任とは何ですか

JavaScriptイベント委任とは何ですか

青灯夜游
青灯夜游オリジナル
2021-04-07 12:55:022644ブラウズ

JavaScript では、イベント委任はバブリングの原理を使用して、親要素または祖先要素にイベントを追加し、実行効果をトリガーします。イベント委任の利点: 1. JS のパフォーマンスを向上させることができます; 2. 要素の変更によってイベント バインディングを変更することなく、DOM 要素を動的に追加できます。

JavaScriptイベント委任とは何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

1. イベント委任とは何ですか?

#イベント委任では、バブリングの原理を使用してイベントを親要素または祖先要素に追加し、実行効果をトリガーします。

例: ドキュメント内のクリック イベントをバインドします。クリック オブジェクトがボタン ボタンの場合、ポップアップ ボックスにはボタン btn の値が表示されます

<body>

<button id="btn" value="嘿嘿">哈哈</button>

<script>
  window.onload=function () {

    let btn=document.getElementById("btn")
    document.onclick=function (e) {
      // console.log(e.target)
      if(e.target===btn){
        alert(btn.value)
      }
    }

  }
</script>
</body>

JavaScriptイベント委任とは何ですか

2. イベント委任の利点

#(1) JS のパフォーマンスを向上させることができます

例: ul 100 li に作成し、各 li をクリックすると、ポップアップ ボックスに li の値が表示されます。

従来の記述方法: onclick イベントを各 li にバインドし、アラート イベントをトリガーします

イベント委任: ドキュメントに onclick イベントをバインドします。onclick イベントがトリガーされると、それが

  • タグであるかどうかを判断します。そうであれば、
  • タグの値を警告します。

    (2) DOM 要素を動的に追加できるため、要素の変更に伴うイベント バインディングを変更する必要がありません。

    3. イベント委任に関する注意事項

    イベント委任がバインドされる要素は、できればその親である必要があります。監視対象の要素

  • の上の
      、 の上の などの要素。

      イベントのバブリングのプロセスにも時間がかかるため、トップレベルに近づくほど、イベントの「イベント伝播チェーン」が長くなり、時間がかかります。

      4. イベント バブリングとイベント キャプチャ

      JavaScriptイベント委任とは何ですか

      図に示すように、イベント バブリングはサブ要素は、レイヤーごとにイベントを親要素に送信します。イベント委任はバブリング原理を使用します; イベント キャプチャは、DOM の最上位オブジェクトからレイヤーごとに子要素に伝播されます。

      プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !

  • 以上がJavaScriptイベント委任とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。