💡

JavaScriptのpreventDefault()とは?

JboyHashimoto

2023/06/21に公開

公式の解説がわかりずらかった

こちらの解説がわかりにくかったので、自分が理解しやすいように、記事を書くことにした。説明の仕方が、そもそも難しすぎないか😅

preventDefault()は、JavaScriptのイベント処理において、デフォルトのイベント動作をキャンセルするためのメソッドです。イベントが発生した要素（通常はHTML要素）に対してpreventDefault()を呼び出すことで、そのイベントがもともと行われるべきデフォルトの挙動を防止することができます。

以下に、preventDefault()の解説とサンプルコードを示します：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクのデフォルトの動作をキャンセルしました');
});

この例では、querySelectorを使用して最初の<a>要素を取得し、クリックイベントのリスナーを追加しています。イベントリスナー関数内でevent.preventDefault()を呼び出しています。

preventDefault()は、この場合、リンクがクリックされたときのデフォルトの挙動であるページ遷移を防止します。代わりに、コンソールに「リンクのデフォルトの動作をキャンセルしました」というメッセージが表示されます。

preventDefault()は、フォームの送信イベントやリンクのクリックイベントなど、さまざまな場面で使用されます。デフォルトの挙動をキャンセルし、代わりにカスタムの動作を実行することができます。

なお、preventDefault()はイベントオブジェクトのメソッドであるため、イベントリスナーのコールバック関数の引数としてイベントオブジェクトが渡される必要があります。上記の例では、イベントオブジェクトをeventとして受け取り、それを使用してpreventDefault()を呼び出しています。

ReactHooksを使った例

React Hooksを使用して、preventDefault()を実現する例を示します。

import React from 'react';

function LinkComponent() {
  const handleClick = (event) => {
    event.preventDefault();
    console.log('リンクのデフォルトの動作をキャンセルしました');
  };

  return (
    <a href="#" onClick={handleClick}>
      リンク
    </a>
  );
}

export default LinkComponent;

この例では、LinkComponentという関数コンポーネントを定義しています。handleClickという関数内で、クリックイベントのデフォルトの挙動をキャンセルするためにevent.preventDefault()を呼び出しています。

LinkComponentコンポーネントの戻り値として、<a>要素を返しています。onClick属性にhandleClick関数を指定することで、リンクがクリックされたときにhandleClickが実行されます。

handleClick内でevent.preventDefault()が呼び出されるため、リンクのデフォルトの動作であるページ遷移がキャンセルされます。また、コンソールに「リンクのデフォルトの動作をキャンセルしました」というメッセージが表示されます。

このように、React Hooksを使用してリンクのクリックイベントでpreventDefault()を実現することができます。関数コンポーネント内でイベント処理を行う際に、preventDefault()を使用することでデフォルトの挙動を制御できます。

まとめ

preventDefaultは、デフォルトのイベント動作をキャンセルするためのメソッドです。

Jboy王国メディアPublication

これは、Jboy王国公式のZennアカウントです。

公式の解説がわかりずらかった

ReactHooksを使った例

まとめ

Discussion