JavaScript - ユーザの操作時に処理を呼び出す

EventTarget.addEventListener()

EventTarget.addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。EventTarget.addEventListener の構文は以下のとおりです。

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
EventTarget.addEventListener() メソッド
type
対象とするイベントの種類を表す文字列です。利用可能なイベントタイプの一覧は、イベントリファレンスを参照してください。
options
対象のイベントリスナーの特性を指定する、オプションのオブジェクトです。次のオプションが使用できます。
  • capture: Boolean 値で、この型のイベントが DOM ツリーで下に位置する EventTarget に発送される前に、登録された listener に発送されることを示します。
  • once: Boolean 値で、listener の呼び出しを一回のみのとしたいかどうかを値で指定します。true を指定すると listener は一度実行された時に自動的に削除されます。
  • passive: Boolean 値で、true ならば listener で指定された関数が preventDefault() を呼び出さないことを示します。呼び出されたリスナーが preventDefault() を呼び出すと、ユーザエージェントは何もせず、コンソールに警告を出力します。
useCapture
Boolean 値で、この型のイベントが DOM ツリーの下の EventTarget に発送される前に、登録された listener に発送されることを示します。ツリーを上方向にバブリングするイベントは、キャプチャを使用するように指定されたリスナーを起動しません。イベント伝播モードは、要素がイベントを受信する順序を決定します。省略した場合、useCapturefalse となります。
var btn = document.getElementById("btn");

btn.addEventListener("click", function() {
   console.log("クリックされました");
}, false);
EventTarget.addEventListener() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
912111711
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

EventTarget.removeEventListener()

EventTarget.removeEventListener() メソッドは、EventTarget.addEventListener() メソッドで登録されたイベントリスナーを削除します。EventTarget.removeEventListener の構文は以下のとおりです。

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);
EventTarget.removeEventListener() メソッド
type
イベントリスナーを削除するイベントの型を表す文字列です。利用可能なイベントタイプの一覧は、イベントリファレンスを参照してください。
listener
イベントターゲットから削除するイベントハンドラーの EventListener 関数です。
options
イベントリスナーに関する特性を指定する、オプションのオブジェクトです。次のオプションが使用できます。
  • capture: Boolean 値で、この型のイベントが DOM ツリーで下に位置する EventTarget に発送される前に、登録された listener に発送されることを示します。
useCapture
削除する EventListener がキャプチャーリスナーとして登録されているかを指定します。この引数を省略した場合は、既定値の false であるとみなします。
var btn = document.getElementById("btn");

// イベントリスナーを登録
btn.addEventListener("click", btnClick);

// イベントリスナーを削除
btn.removeEventListener("click", btnClick);

function btnClick() {
   console.log("クリックされました");
}
EventTarget.removeEventListener() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
912111711
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
23
Shares:
2
Tag:
JavaScript
コードレシピ