Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでのイベントキャプチャとは何ですか？

イベントキャプチャ

イベントキャプチャ イベントは最上位の要素からターゲット要素まで開始されます。 イベントバブリングの反対です。 、ターゲット要素から最上位要素まで。

コードの詳細

次のコードでは、bodyセクションで3つのdiv要素が取得され、それらがネストされるようにスタイルが適用されています。

  • addEventListener を使用して、各divタグにイベントハンドラーを追加します （）。
  • ここでイベントが「クリック」であることを確認してください 「イベント。
  • addEventListener（） メソッドは3つのパラメーターを受け入れます。

a）アクセスしようとしているイベント、ここではクリックイベントです。

b）イベントハンドラ関数 アラートメッセージを表示するため。

c）3番目のパラメータはフェーズと呼ばれます。このパラメータでtrueを維持すると、イベントキャプチャ 有効になります。falseのままにすると、イベントバブリング 有効になります。

  • イベントハンドラー関数 、アラートボックスの表示に使用され、 getAttributeを使用します （）クリックされたdiv要素のid値を取得します。
  • 最も内側のネストされたタグdiv3をクリックすると 、ここでイベントキャプチャが有効になっているため、アラートメッセージは上から始まります div1 ターゲットタグへのタグdiv3 。
  • div2をクリックすると タグを付けると、アラートボックスが上から表示されます div1 タグからターゲットタグdiv2。

例

<html>
<head>
<style>
   .divstyle{
      display:table-cell;
      border: 2px solid black;
      padding: 20px;
      text-align: center;
   }
</style>
</head>
<body>
   <div id = "div1" class="divstyle">
   div1
   <div id = "div2" class="divstyle">
   div2
   <div id = "div3" class="divstyle">
   div3
<script>
   var divs = document.getElementsByTagName("div");
   for(var i = 0; i<divs.length; i++){
      divs[i].addEventListener("click",clickhandler,true );
   }
   function clickhandler() {
      alert(this.getAttribute("id") + "event got handled");
   }
</script>
</body>
</html>

上記のプログラムを実行すると、画面に次の画像が表示されます

JavaScriptでのイベントキャプチャとは何ですか？

上記のdiv3をクリックすると （ターゲット要素）出力として次のようになります

出力

JavaScriptでのイベントキャプチャとは何ですか？ 
On clicking ok of the above div1 alert box we get the following div2 alert box opened

JavaScriptでのイベントキャプチャとは何ですか？ 
On clicking ok of the above div2 alert box we get the following div3 alert box opened.

JavaScriptでのイベントキャプチャとは何ですか？



  1. JavaScriptでのイベントバブリングとキャプチャとは何ですか？

    イベントバブリングは、1つの要素が2番目の要素内にネストされ、両方の要素が同じイベント（クリックなど）のリスナーを登録したときにイベントハンドラーが呼び出される順序です。バブリングでは、イベントは最初に最も内側の要素によってキャプチャおよび処理され、次に外側の要素に伝播されます。 キャプチャを使用すると、イベントは最初に最も外側の要素によってキャプチャされ、内側の要素に伝播されます。 両方の例を見てみましょう。 次の両方の例について、次のHTMLを作成します- 例 <div id='outer' style='background-color:red;dis

  2. JavaScriptでのイベントバブリングとイベントキャプチャ？

    イベントバブリング −要素でイベントが発生するたびに、イベントハンドラーは最初にその要素で実行され、次にその親で実行され、最後に他の祖先まで実行されます。 イベントキャプチャ −これはイベントのバブリングの逆であり、ここでイベントは親要素から始まり、次にその子要素に始まります。 以下は、JavaScriptでのイベントバブリングとイベントキャプチャのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <