preventDefault()は、JavaScriptのイベント処理において、デフォルトのイベント動作をキャンセルするためのメソッドです。イベントが発生した要素（通常はHTML要素）に対してpreventDefault()を呼び出すことで、そのイベントがもともと行われるべきデフォルトの挙動を防止することができます。
preventDefault()を使用するには、イベントリスナーのコールバック関数の引数としてイベントオブジェクトを受け取ります。そして、そのイベントオブジェクトのpreventDefault()メソッドを呼び出します。
たとえば、リンクをクリックしたときにページ遷移をキャンセルするには、次のコードのようにします。
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
console.log('リンクのデフォルトの動作をキャンセルしました');
});
このコードでは、querySelector()を使用して最初の<a>要素を取得し、クリックイベントのリスナーを追加しています。イベントリスナー関数内でevent.preventDefault()を呼び出しています。preventDefault()は、この場合、リンクがクリックされたときのデフォルトの挙動であるページ遷移を防止します。代わりに、コンソールに「リンクのデフォルトの動作をキャンセルしました」というメッセージが表示されます。
preventDefault()は、さまざまな場面で使用することができます。たとえば、次のようなものが挙げられます。
- リンクをクリックしたときにページ遷移をキャンセルする
- フォームを送信したときに確認ダイアログを表示する
- ドロップダウンリストから項目を選択したときにイベントをトリガーする
preventDefault()を使用する際には、いくつかの注意点があります。
- preventDefault()は、イベントがキャンセル可能な場合にのみ有効です。イベントがキャンセル不可の場合は、preventDefault()を呼び出しても効果はありません。
- preventDefault()は、イベントが発生した要素に対してのみ呼び出すことができます。
- preventDefault()は、イベントリスナーのコールバック関数の外部から呼び出すことはできません。
preventDefault()は、JavaScriptのイベント処理において重要なメソッドです。デフォルトのイベント動作をキャンセルすることで、さまざまなカスタマイズを行うことができます。
