泡立ちイベントと非泡立ちイベントの間の応答メカニズムの違いは何ですか?

バブリング イベントと非バブリング イベントの違いは何ですか。具体的なコード例が必要です。

イベントはプログラミングにおいて重要な役割を果たします。イベントはユーザーのインタラクションになる可能性があります。動作 (クリック、ドラッグなど)、またはブラウザまたは Web ページの内部動作 (読み込みの完了、ウィンドウ サイズの変更など)。さまざまなイベント伝播方法に従って、イベントはバブリング イベントと非バブル イベントに分類できます。

バブリング イベント
バブリング イベントとは、イベント ターゲットから開始され、ドキュメント ルート ノードに到達するまで段階的に上位の要素に伝播するイベントを指します。伝播プロセス中、最初に親要素のイベント ハンドラーがトリガーされ、次に祖父母要素のイベント ハンドラーというように、ルート ノードのイベント ハンドラーまでトリガーされます。

以下はバブリング イベントのサンプル コードです:

HTML コード:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

JavaScript コード:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

inner.addEventListener('click', function(event) {
  console.log('内部div被点击');
});

outer.addEventListener('click', function(event) {
  console.log('外部div被点击');
});

ボタンがクリックされると、コンソールは次の内容を出力します:

按钮被点击
内部div被点击
外部div被点击

出力から、バブリング イベントが最初にボタンのクリック イベント ハンドラーをトリガーし、次に内部 div のクリック イベント ハンドラーをトリガーし、最後にクリック イベントをトリガーすることがわかります。外側の div のハンドラー。

非バブル イベント
非バブル イベントとは、イベント ターゲットでのみトリガーされ、上方に伝播しないイベントを指します。つまり、クリックされた要素のイベント ハンドラーのみが実行されます。

次に、非バブル イベントのサンプル コードを示します。

HTML コード:

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

JavaScript コード:

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

inner.addEventListener('click', function(event) {
  console.log('内部div被点击');
});

outer.addEventListener('click', function(event) {
  console.log('外部div被点击');
}, true);

ボタンがクリックされたとき、コンソール 次の内容のみが出力されます。

按钮被点击

出力結果からわかるように、非バブリング イベントはボタンのクリック イベント ハンドラーのみをトリガーしました。

要約すると、バブリング イベントと非バブリング イベントの主な違いは、イベントが伝播される方法です。バブリング イベントはイベント ターゲットから上位要素に伝播しますが、非バブリング イベントはイベント ターゲットでのみトリガーされます。これら 2 つのイベントの違いを理解することは、イベントの伝播を処理し、ページのインタラクティブな効果を最適化するために非常に重要です。

以上が泡立ちイベントと非泡立ちイベントの間の応答メカニズムの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。