一部のイベントにはバブリング メカニズムがないのはなぜですか?

一部のイベントがバブルに失敗するのはなぜですか?

JavaScript では、イベント バブリングは一般的なイベント処理メカニズムです。これは、要素がイベントをトリガーすると、イベントがその親要素に渡され、ドキュメントが完成するまで祖先要素に順番にバブルアップすることを意味します。ルート要素に到達しました。ただし、一部のイベントはバブルアップできません。つまり、通常のイベント フローに従って渡すことができません。この記事では、これが発生する理由を検討し、いくつかの具体的なコード例を示します。

1. 非バブル イベントの定義と理由

1. 定義

非バブル イベント (非バブル) は、特定のイベント タイプを指します。これらのイベントがトリガーされると、イベントは発生した要素上でのみ処理され、上位の要素には渡されません。

2. 原因

イベントがバブルアップできない理由には通常、次のようなものがあります。

(1) イベント タイプ: 一部のイベント タイプ自体はバブルアップしません。フォーカス、ブラー、ロード、アンロード、その他のイベントなどのバブリング機能があります。

(2) 属性の設定: イベント処理関数で属性を false に設定すると、イベントのバブリングを防ぐことができます。

(3) 特別なメソッド: stopPropagation() や stopImmediatePropagation() などの一部の特別なイベント処理メソッドは、イベントのバブリングを防ぐことができます。

2. バブルアップできないイベントの例

以下では、バブルアップできないいくつかの一般的なイベントを例として取り上げ、その理由とその使用方法を説明します:

1. focus および Blur イベント:

focus および Blur は入力要素のフォーカス イベントであり、バブルしません。これは、ユーザーがテキスト ボックスに入力するときに、現在フォーカスされている要素にのみ影響を与えることが最も合理的であるためです。

<input type="text" id="myInput">
<button id="myButton">Click me!</button>
<script>
document.getElementById('myInput').addEventListener('focus', function() {
  console.log('Input element focused');
});
document.getElementById('myButton').addEventListener('focus', function() {
  console.log('Button element focused');
});
</script>

出力結果: フォーカスされた入力要素

2. ロード イベントとアンロード イベント:

ロード イベントは、ページまたは要素がロードされた後にトリガーされます。 unload イベントは、ページまたは要素がアンロードされるときにトリガーされます。また、これらのイベントはロードまたはアンロードされる要素にのみ関連するため、バブルアップしません。

<div id="myDiv"></div>
<script>
document.getElementById('myDiv').addEventListener('load', function() {
  console.log('Div element loaded');
});
</script>

出力結果: Div 要素がロードされました

3. stopPropagation メソッド:

stopPropagation() メソッドは、イベントのバブリングを防ぐために使用されます。このメソッドを使用すると、イベントは上位要素に渡されなくなります。

<div id="parent">
  <div id="child">
    <button id="myButton">Click me!</button>
  </div>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('Child clicked');
});
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked');
});
</script>

出力結果: Child clicked

上記の例からわかるように、子要素のボタンをクリックすると、イベントは子要素でのみトリガーされ、通常のようにリスクは発生しません。親要素へのバブル。

3. 概要と展望

この記事では、一部のイベントがバブルアップできない理由を調査し、具体的なコード例を示します。これらのイベントの特徴と原因を理解することで、これらのイベントをより適切に処理し、実際の開発で柔軟に使用することができます。この記事の紹介を通じて、読者がイベント バブリングのメカニズムをより深く理解し、実際に柔軟に使用できるようになることを願っています。

以上が一部のイベントにはバブリング メカニズムがないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。