バブリングイベントのサポートなし: 制限と範囲

バブリング イベントとは、DOM ツリー内の子要素から親要素へ段階的にトリガーされるイベント配信メソッドを指します。ほとんどの場合、バブリング イベントは非常に柔軟でスケーラブルですが、イベントがバブリングをサポートしない特殊なケースがいくつかあります。

1.バブリングをサポートしていないイベントはどれですか?
ほとんどのイベントはバブリングをサポートしていますが、バブリングをサポートしていないイベントもあります。バブリングをサポートしない一般的なイベントは次のとおりです。

1. イベントのフォーカスとぼかし
2. イベントのロードとアンロード
3. イベントの入力、選択、および変更
4. サブミットおよびリセットイベント
5. スクロールイベント
6. mouseenterおよびmouseleaveイベント
7. contextmenuイベント

2.イベントの例
Forバブリング イベントの制限をよりよく理解するために、バブリングをサポートしていない各イベントの具体的なコード例を以下に示します。

1. フォーカス イベントとブラー イベント
   フォーカス イベントとブラー イベントは次のとおりです。要素がフォーカスを取得または失うことを処理するために使用されるイベント。これらのイベントはバブリングをサポートしていません。つまり、子要素でフォーカス イベントやブラー イベントをトリガーしても、親要素の対応するイベントはトリガーされません。

HTML コード:

<div>
  <input type="text" id="myInput">
</div>

JavaScript コード:

const myInput = document.getElementById('myInput');
myInput.addEventListener('focus', function() {
  console.log('Input获得焦点');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('focus', function() {
  console.log('Div获得焦点');
});

結果:
テキスト ボックスにフォーカスがあると、「入力が取得されました」のみが出力されます。 「Div にフォーカスがあります」を出力する代わりに、「コンソールにフォーカスがあります」と表示されます。 focus イベントは親要素 div までバブルアップしないためです。

2. ロード イベントとアンロード イベント
   ロード イベントとアンロード イベントは、ページまたはリソースが読み込まれた後にトリガーされるイベントです。これらのイベントはバブリングをサポートしていません。つまり、ロードまたはアンロード イベントが子要素でトリガーされても、親要素の対応するイベントはトリガーされません。

HTMLコード:

<div>
  <img  src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" id="myImage" alt="バブリングイベントのサポートなし: 制限と範囲" >
</div>

JavaScriptコード:

const myImage = document.getElementById('myImage');
myImage.addEventListener('load', function() {
  console.log('图片加载完成');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('load', function() {
  console.log('Div加载完成');
});

結果:
画像読み込みが完了すると「画像読み込み完了」のみが出力されますコンソールでは、「Div ロードが完了しました」と出力されるのではなく、「」と表示されます。これは、load イベントが親要素 div までバブルアップしないためです。

3. 入力、選択、および変更イベント
   入力、選択、および変更イベントは、フォーム要素の値の変更を処理するために使用されるイベントです。これらのイベントは、値が実際に変更された要素にのみ影響し、親要素には反映されません。

HTML コード:

<input type="text" id="myInput">

JavaScript コード:

const myInput = document.getElementById('myInput');
myInput.addEventListener('input', function() {
  console.log('输入框值改变');
});
const myForm = document.querySelector('form');
myForm.addEventListener('input', function() {
  console.log('表单值改变');
});

結果:
入力ボックスの値が変更された場合、「入力」のみが出力されますコンソールでは「フォーム値が変更されました」ではなく「ボックス値が変更されました」は出力されません。入力イベントが親要素フォームにバブルアップしないためです。

4. 送信イベントとリセット イベント
   送信イベントとリセット イベントは、フォームが送信されリセットされたときにトリガーされるイベントです。これらのイベントはフォーム要素自体にのみ適用でき、親要素にはバブルアップされません。

HTML コード:

<form id="myForm">
  <input type="submit" value="提交">
</form>

JavaScript コード:

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('表单已提交');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('submit', function() {
  console.log('Div提交');
});

結果:
送信ボタンをクリックすると、「フォーム送信」のみが出力されます。 「Div Submit」の代わりにコンソール「」が出力されます。 submit イベントは親要素 div までバブルアップしないためです。この例では、event.preventDefault() メソッドを通じてフォームのデフォルトの送信動作を防止していることに注意してください。

5. scroll イベント
   scroll イベントは、スクロールが発生したときにトリガーされるイベントです。このイベントはバブリングをサポートしていません。つまり、要素をスクロールするときに、親要素のスクロール イベントはトリガーされません。

HTML コード:

<div style="height: 100px; width: 100px; overflow: auto;">
  <p>这是一段很长的文本</p>
</div>

JavaScript コード:

const myDiv = document.querySelector('div');
myDiv.addEventListener('scroll', function() {
  console.log('滚动');
});

結果:
div をスクロールすると、コンソールには「scroll」のみが出力されます、上位要素にはバブルしません。

6. mouseenter イベントと Mouseleave イベント
   mouseenter イベントと Mouseleave イベントは、マウスが要素に出入りするときにトリガーされるイベントです。これらのイベントはバブリングをサポートしていません。つまり、マウスが要素に出入りするときに、親要素の対応するイベントはトリガーされません。

HTML コード:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;">
  <p>鼠标进入这个div</p>
</div>

JavaScript コード:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', function() {
  console.log('鼠标进入div');
});
const myBody = document.querySelector('body');
myBody.addEventListener('mouseenter', function() {
  console.log('鼠标进入body');
});

結果:
マウスが div に入ると、「マウスが div に入る」だけが実行されます。 「マウスが本体に入りました」を出力する代わりに、「コンソールに出力されます。」

7. contextmenu イベント
   contextmenu イベントは、マウスの右ボタンがクリックされたときにトリガーされるイベントです。このイベントはバブリングをサポートしていません。つまり、要素を右クリックしても、親要素の contextmenu イベントはトリガーされません。

HTML コード:

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;"></div>

JavaScript コード:

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键点击');
});
const myBody = document.querySelector('body');
myBody.addEventListener('contextmenu', function() {
  console.log('右键点击body');
});

結果:
div を右クリックすると、「右クリック」のみが行われます。 「本文を右クリック」を出力する代わりに、コンソールに出力します。この例では、event.preventDefault() メソッドを通じてデフォルトのコンテキスト メニューが表示されないようにしていることに注意してください。

3. 概要
バブル イベントは、DOM ツリー内の子要素から親要素へ段階的にトリガーされるイベント配信方法です。ほとんどのイベントはバブルをサポートしていますが、サポートしていないイベントもあります。バブルのスペシャルイベント。この記事では、読者がバブリング イベントの制限を理解できるように、特定のコード例を通じてバブリングをサポートしていないイベントを分析します。

以上がバブリングイベントのサポートなし: 制限と範囲の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。