JavaScript の「event.stopPropagation」と「event.preventDefault」の違いは何ですか?

event.stopPropagation とevent.preventDefault の違いを理解する

JavaScript でイベントを処理する場合、一般的に次の 2 つの主要なメソッドに遭遇します。 event.stopPropagation とevent.preventDefault。どちらもイベントの処理方法に影響しますが、機能に影響を与える微妙な違いがあります。

event.stopPropagation

stopPropagation は、イベントが上または下に伝播するのを防ぎます。 DOM ツリー。これにより、キャプチャ フェーズ (イベントがバブルダウンしているとき) またはバブリング フェーズ (イベントが処理された後にバブルアップしているとき) で、親要素または上位要素にアタッチされた他のイベント ハンドラーにイベントが到達するのを停止します。

一方、event.preventDefault

preventDefault は、ブラウザーが実行するデフォルトのアクションを防止します。通常、イベントに応答して実行されます。たとえば、クリック イベントがアンカー タグでトリガーされた場合、preventDefault はブラウザーが指定されたタグに移動するのを停止します。 URL.

例:

• preventデフォルト:

$("#but").click(function (event) {
  event.preventDefault()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})

• stopPropagation:

$(document).on('click', 'button', function (event) {
  event.stopPropagation()
})

差分vs. 冗長性?

では、なぜ両方の方法があるのでしょうか?それぞれが異なる目的を果たします。 PreventDefault はイベントのデフォルトの動作に影響を与えますが、stopPropagation は DOM を介したイベントの伝播を制御します。両方の呼び出し (event.stopPropagation().preventDefault() など) を連鎖させることで同様の効果を達成することは可能ですが、必ずしも必要というわけではありません。決定は、望ましい結果によって異なります。

使用ガイドライン:

• フォーム送信やアンカー タグ ナビゲーションなどのデフォルトのブラウザー アクションを防止するには、preventDefault を使用します。
• stopPropagation を使用して、要素またはその要素でさらにイベント ハンドラーがトリガーされるのを防ぎます。
• デフォルトのアクションとさらなる伝播の両方を防止したい場合は、両方のメソッドを組み合わせます。

以上がJavaScript の「event.stopPropagation」と「event.preventDefault」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。