event.cancelable

イベントキャンセラブル（イベント）

意味キャンセル可能か

event.cancelableとは？

イベントのデフォルトの動作をキャンセル可能かどうかを示す真偽値です。キャンセル可能であれば、`true` が返されます。

event.cancelableの具体的な使い方

イベントのキャンセル可能性を確認する例

<a href="https://www.example.com" id="link">リンク</a>
<form id="form">
  <input type="text" name="example">
  <button type="submit">送信</button>
</form>

<script>
function checkCancelable(element, eventType) {
  element.addEventListener(eventType, function(event) {
    console.log(`${eventType}イベントはキャンセル可能か: ${event.cancelable}`);
    if (event.cancelable) {
      event.preventDefault();
      console.log(`${eventType}イベントのデフォルト動作を防止しました。`);
    }
  });
}

const link = document.getElementById('link');
const form = document.getElementById('form');

checkCancelable(link, 'click');
checkCancelable(form, 'submit');

// loadイベントはキャンセル不可能
window.addEventListener('load', function(event) {
  console.log(`loadイベントはキャンセル可能か: ${event.cancelable}`);
});
</script>

この例では、リンクのクリックイベント、フォームの送信イベント、そしてウィンドウのロードイベントのキャンセル可能性を確認します。キャンセル可能なイベントには preventDefault() メソッドを使用してデフォルトの動作を防止します。

event.cancelableに関するよくある質問

Q. event.cancelableとは何ですか？

A. event.cancelableは、イベントのデフォルトの動作をキャンセルできるかどうかを示す真偽値プロパティです。trueの場合、preventDefault()メソッドを使用してイベントのデフォルト動作を阻止できます。

Q. キャンセル可能なイベントの例は？

A. 多くのブラウザイベントはキャンセル可能です。例えば、クリックイベント（リンクのクリック）、フォームの送信、キーイベントなどがあります。ただし、load、unloadなど一部のイベントはキャンセルできません。

Q. cancelableとpreventDefault()の関係は？

A. event.cancelableがtrueの場合のみ、preventDefault()メソッドが有効になります。cancelableがfalseの場合、preventDefault()を呼び出しても効果がありません。

event.cancelableが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのevent.cancelableやevent.target、touchcancel、scroll、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。