event.stopPropagation vs event.preventDefault()vs.DOMイベントでfalseを返す

JavaScriptでのDOMイベントの処理に関しては、常に1つのことに混乱しているように感じます。

いつ電話すればいいですかstopPropagation()イベントオブジェクトに?いつ電話すればいいですかpreventDefault()イベントオブジェクトに?するべきかreturn false

Event.stopPropagation

要素のクリックイベントを処理するとします。

デフォルトでは、DOM要素のイベントは、クリックされた特定の要素(ボタンなど)で発生し、停止されない限り、そのすべての親要素ツリーに伝播されます。

イベントがイベントハンドラーで処理され、そこで「停止」することを確認したいと思います。

を呼び出すことで伝播を停止できますstopPropagation()の方法Eventオブジェクト、通常はイベントハンドラーの最後にあります。

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // process the event
  // ...

  event.stopPropagation()
})

Event.preventDefault

を呼び出すpreventDefault()イベントオブジェクトのメソッドは、ブラウザが実行するようにプログラムされているデフォルトの処理をキャンセルします。

で新しいページを開くa素子clickたとえば、イベント。

または提出するformsubmitイベント。

呼び出しpreventDefault()アクションを完全にカスタマイズするために必要なことです。おそらく作成することによってfetchリンククリックで新しいページを開く代わりに、JSONをロードするように要求します。

この同じ要素で定義された他のイベントハンドラーが実行されます。あなたが電話しない限りevent.stopImmediatePropagation()

戻るfalse

これは、以前の(または現在の)jQuery開発者にとって特に混乱を招きます。 jQueryで、false自動的に呼び出されるイベントハンドラーからEvent.preventDefaultそしてEvent.stopPropagationわたしたちのため。

バニラJavaScriptでは、return falseイベントハンドラーでは何もない

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: