event.preventDefault() および event.stopPropagation() を使用してブラウザのデフォルトを管理する方法

ブラウザには、さまざまなイベントに対するデフォルトの相互作用と動作があります。

たとえば、ユーザーがフォームの「送信」ボタンをクリックすると、フォームはデフォルトで URL に送信されます。

要素の子がクリックされると、メイン コンテナーであるため、要素でもクリック イベントが発生します。

場合によっては、これらのデフォルトをオーバーライドしたいことがあります。この記事では、event.preventDefault() が何であるかを学びます。 と event.stopPropagation() メソッドは、ブラウザで発生するいくつかのデフォルト アクションをキャンセルするためにそれらを使用する方法です。

event.preventDefault()

このメソッドは、イベントがトリガーされたときにブラウザーが行うデフォルトのアクションを防ぎます。

Web ページのデフォルト アクションの例と、event.preventDefault() でそれらをオーバーライドする方法を次に示します。 .

デフォルトのフォーム送信を上書きする方法

ユーザーがフォームを送信すると (送信ボタンがクリックされた場合)、フォームのデフォルト アクションは、データを処理する URL にフォームのデータを送信することです。

フォーム要素には action があります と method フォームを送信する URL とリクエストのタイプを指定する属性 (get 、 post 、など)、それぞれ。

これらの属性が指定されていない場合、デフォルトの URL はフォームが送信された現在の URL であり、メソッドは get です。 .

たとえば、このコード:

<form>
  <input name="email" />
  <input name="password" />
  <input type="submit" />
</form>

このページを作成します:

「dillion」と「password」を入力してフォームを送信すると、get が表示されます。 127.0.0.1:5500/index.html に送信されたリクエスト このように:

このアクションは、ブラウザがデフォルトでフォームを処理する方法です。

ただし、リクエストを送信する前に、データに対してさらに多くのことを行いたい場合があります。これは、フォームを処理する今日のアプローチでは特に一般的です。

リクエストを URL に送信する前に、データの検証、データのチェック、処理、ヘッダーの構成などを行う必要がある場合があります。

これらのシナリオでは、フォームの既定のアクションを防止する必要があります。方法は次のとおりです:

<form id='form'>
  ...
</form>

const form = document.getElementById('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()
  
  // process data and submit a request manually
})

このようにして、フォームの送信はあなたの手に委ねられます。

リンクをクリックしたときのデフォルト アクションをオーバーライドする方法

リンクをクリックすると (アンカータグ a href で 属性)、デフォルトのアクションは、クリックされたリンクへのブラウザーでのナビゲーションです。

そのアクションをインターセプトして、ナビゲーションの前に何かをしたい場合はどうしますか?たとえば、ユーザーが移動先のページにアクセスできることを確認します。その方法は次のとおりです。

<a id="link" href="https://google.com">Google</a>

const link = document.getElementById("link")

link.addEventListener("click", event => {
  event.preventDefault()

  // do something and navigate
})

あなたはそれをテストすることができます。 「Google」リンクをクリックしても、ナビゲーションは行われません。これは、デフォルトのナビゲーション アクションを禁止しているためです。ここで、ナビゲーションを自分で処理する必要があります。

event.stopPropagation()

伝播とは、何か (この場合はイベント) を広める行為です。 stopPropagation メソッドは、要素でイベントがトリガーされたときにイベントの拡散を防ぐために使用されます。

JavaScript では、要素でイベントをトリガーすると、ツリーがその要素の親と祖先にバブル アップします。基本的に、イベントを持つ要素は親のコンテナーの「内側」にあるため、親もイベントを受け取ります。

これをよりよく説明するために、例を使用します。

要素の子をクリックする

次の要素があるとします:

<div>
  <button>Click me</button>
</div>

button をクリックすると 、あなたは div もクリックしています ボタンがコンテナー内にあるためです。このロジックは、クリック イベントがボタンからコンテナーに伝播し、イベントがルートに到達するまですべての祖父母に広がり続けることを意味します。

これを確認するために、このコードでこれがどのように機能するかを説明します:

<div id="div">
  <button id="button">Click me</button>
</div>

const div = document.getElementById('div')
const button = document.getElementById('button')

button.addEventListener('click', () => {
  console.log('button clicked')
})

div.addEventListener('click', () => {
  console.log('div container clicked')
})

これをブラウザで実行してボタンをクリックすると、次の結果が得られます:

div コンテナもクリック イベントを受け取るため、クリック コールバック関数も呼び出されます。

イベントの伝播は、イベントと要素のデフォルトの動作ですが、場合によっては、一部の動作が必要ない場合があります。多くの例の中から 1 つを紹介します。

Gmail の新しいメッセージ ポップアップは次のとおりです。

上部には、3 つのアクション ボタンがあります。 1 つはポップアップを最小化し、1 つはポップアップを全画面表示にし、もう 1 つはポップアップを閉じます。

ただし、「新しいメッセージ」テキストを含む上部バーにもクリック ハンドラーがあるため、クリックするとポップアップが最小化されます。

ここで避けたいことの 1 つは、いずれかのボタンをクリックしたときに、クリック イベントがトップ バーに伝播されないようにし、そのイベントの関数も実行しないようにすることです。つまり、たとえば、閉じるボタンをクリックしたときに、トップ バーも最小化したくないということです。

このような場合、伝播を停止します。

ポップアップが次のように構築されているとしましょう:

<div id='top-bar'>
  <!-- The Message Element -->
  <!-- The Buttons -->
</div>

const topBar = document.getElementById('top-bar')
const closeButton = document.getElementById('close-btn')

topBar.addEventListener('click', () => {
  // minimize or maximize popup
})

closeButton.addEventListener('click', () => {
  // close popup
})

stopPropagation も追加する必要があります メソッドをボタンのリスナーに渡して、イベントがトップバーに広がるのを防ぎます。そのためには、ボタンのリスナーを次のように更新します:

closeButton.addEventListener('click', (event) => {
  event.stopPropagation()
  // close popup
})

これにより、トップバーは直接クリックされた場合にのみクリック イベントを受け取ります。

まとめ

event.preventDefault() の違い と event.stopPropagation() 前者はブラウザによって行われるデフォルトのアクションを防ぎますが、後者はイベントのデフォルトの動作を防ぎます – ツリーを上に伝播します.

これらの既定のアクションと動作は間違いではなく、コーディング中に気にする必要はありません。しかし、この記事の例で見たように、それらをオーバーライドしたいシナリオがあります。