JSイベントバブリングでバブリング要素を取得する方法-jsチュートリアル-php.cn

JSイベントバブリングでバブリング要素を取得する方法

WBOY

リリース： 2024-02-20 09:13:36

オリジナル

390 人が閲覧しました

JSイベントバブリングでバブリング要素を取得する方法

JS イベントバブリングでバブリング要素を取得する方法。特定のコード例が必要です。

イベントバブリングとは、要素上のイベントがトリガーされると、その上位層が親要素もこのイベントを受け取ります。 JavaScript では、バブリング要素はイベントオブジェクトを通じて取得できます。以下に、バブリング要素を取得する方法を説明する具体的なコード例を示します。

まず、以下に示すように、ネストされた要素を含む HTML ページが必要です。

<!DOCTYPE html>
<html>
<head>
<title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="button">点击我</button>
    </div>
  </div>

<script src="script.js"></script>
</body>
</html>

ログイン後にコピー

このページには、外側の div 要素 (ID は "outer ")、内側の div 要素があります。要素 (ID は "inner") とボタン要素 (ID は "button") です。

次に、イベントのバブリングを処理し、バブリング要素を取得するための JavaScript ファイルが必要です。 script.js ファイルでは、クリックイベントを処理し、バブル要素の ID を取得します。コードは次のとおりです。

// 获取外层div元素
var outer = document.getElementById('outer');

// 绑定点击事件处理函数
outer.addEventListener('click', function(event) {
  // 获取冒泡元素的id
  var bubbleElementId = event.target.id;
  
  // 打印冒泡元素的id
  console.log('冒泡元素的id：', bubbleElementId);
});

ログイン後にコピー

上記のコードでは、まず getElementById メソッドを通じて外側の div 要素を取得し、次に addEventListener メソッドを使用してクリックイベントハンドラーをそれにバインドします。イベント処理関数では、イベントオブジェクトのtarget属性を使用して、イベントをトリガーした要素、つまりバブリング要素を取得します。次に、ターゲット要素の id 属性を通じてバブル要素の id を取得します。最後に、console.log メソッドを使用して、バブル要素の ID をブラウザーのコンソールに出力します。

ページ上のボタンをクリックすると、イベントが外側の div までバブルアップされ、バブルされた要素の ID 出力がコンソールに表示されます。

上記のコード例を通じて、JavaScript でバブル要素を取得する方法を明確に理解できます。

以上がJSイベントバブリングでバブリング要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。