バブリングで配信できないイベントは何ですか?-jsチュートリアル-php.cn

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

王林

リリース： 2024-01-13 08:50:07

オリジナル

1210 人が閲覧しました

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

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

イベントバブリングとは、要素が 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 サイトの他の関連記事を参照してください。