バブリングで配信できないイベントは何ですか?

#バブルできないイベントは何ですか?

イベント バブリングとは、要素が Web ページ上でイベントをトリガーするときに、その親要素にもイベントのリスナーがある場合、親要素でもイベントがトリガーされることを意味します。イベント バブリングは Web 開発では非常に一般的で、ページ内の複数の要素のイベント応答を簡単に管理できます。ただし、すべてのイベントがバブリング配信に適しているわけではないため、不要な問題を避けるために一部のイベントはバブリングを防止する必要があります。この記事では、バブルできないいくつかの一般的なイベントを紹介し、具体的なコード例を示します。

フォーカスおよびブラー イベント

Web ページでは、要素がフォーカスを獲得する (フォーカス) かフォーカスを失う (ブラー) と、対応するイベントがトリガーされます。フォーカス イベントはページ上のユーザーの操作に関連しているため、これら 2 つのイベントをバブルして配信することはできません。フォーカス イベントをバブルして配信できる場合、予期しない結果が生じる可能性があります。以下はサンプル コードです:

<div id="outer">
  <input id="inner" type="text">
</div>

<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("focus", function() {
  console.log("outer focus");
});

inner.addEventListener("focus", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner focus");
});

inner.addEventListener("blur", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner blur");
});

outer.addEventListener("blur", function() {
  console.log("outer blur");
});
</script>

上記のコードでは、内部テキスト入力ボックスがフォーカスを取得すると、内部フォーカス イベントがトリガーされ、イベントが stopPropagation() を介して外部にバブリングされるのが防止されます。 method.div 要素を使用すると、外部フォーカス イベントはトリガーされません。

スクロール イベント

スクロール イベントは、ページがスクロールされたときにトリガーされるイベントであり、バブリングでは配信できません。スクロールイベントはウェブページのスクロールに関連するため、スクロールイベントをバブル化できるとページのスクロールに混乱を引き起こす可能性があります。以下はサンプル コードです。

<div id="container" style="height: 200px; overflow: auto;">
  <div id="content" style="height: 1000px;"></div>
</div>

<script>
var container = document.getElementById("container");
var content = document.getElementById("content");

container.addEventListener("scroll", function() {
  console.log("container scroll");
});

content.addEventListener("scroll", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("content scroll");
});
</script>

上記のコードでは、コンテンツ領域がスクロールすると、コンテンツ領域のスクロール イベントがトリガーされ、イベント バブリングがコンテナ要素に渡されるのを防ぎます。 stopPropagation() メソッドを使用するため、コンテナのスクロール イベントはトリガーされません。

ロード イベントとアンロード イベント

ロード イベントは、ページまたは画像がロードされた後にトリガーされ、アンロード イベントは、ページがアンロードされる直前にトリガーされます。これら 2 つのイベントは、ページ全体のロードとアンロードに関連するため、バブル化して配信することはできません。バブル化して配信できる場合、ページのロードとアンロードの順序が混乱する可能性があります。以下はサンプル コードです:

window.addEventListener("load", function() {
  console.log("page loaded");
});

window.addEventListener("unload", function() {
  console.log("page unloaded");
});

上記のコードでは、ページがロードされるときにロード イベントがトリガーされ、ページがアンロードされようとしているときにアンロード イベントがトリガーされます。泡立って他の要素に伝達されることはありません。

概要

上記のイベントに加えて、input、change、reset、submit、mouseenter、mouseleave、その他のイベントなど、バブルできないイベントがいくつかあります。これらのイベントを使用する場合は、不要な問題を避けるためにイベント配信メカニズムに注意を払う必要があります。イベント配信の原理を理解すると、Web ページでのイベント応答をより適切に制御および管理し、ユーザー エクスペリエンスを向上させることができます。

以上がバブリングで配信できないイベントは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。