jQueryでイベントを使おう!

jQueryでイベントを使おう!

イベントとは、処理を追加することのできる一定の出来事です。

イベントに追加される処理は、イベントハンドラと呼ばれます。

イベントハンドラとは?

イベントハンドラとは、ユーザーの操作など、ある一定の出来事が発生したときに行われる処理のことです。

例えば、ユーザーがボタンをクリックしたとき、アラートを表示する処理があったとします。

このとき、ユーザーのボタンクリックがイベント、アラートの表示がイベントハンドラです。

イベントハンドラを追加することにより、動的な処理を実装できます。

.on()でイベントを追加しよう!

  • .on(), .one()によるイベントの追加
  • .off()によるイベントの削除
  • .on()による複数イベントの追加

これらの項目については、以下の記事を参照してください。

イベントを発火するには?

$('button').trigger('click');

イベントを発火するには、.trigger()にイベント名を渡します。

サンプルでは、ボタンのクリックイベントを発火させています。

ユーザー定義のイベントについては、バインドした後に発火する必要があることに注意しましょう。

イベントをキャンセルするには?

$('a').on('click', function() {
    return false;
});

イベントをキャンセルするには、コールバック関数でfalseを返します。

サンプルでは、a要素のクリックイベントをreturn false;でキャンセルしています。

ブラウザのデフォルト動作も行われないため、リンクのクリックによるページ遷移は発生しません。

イベントを取得するには?

let events = $._data($('a')[0], 'events');

イベントを取得するには、$._data()の第1引数にa要素、第2引数に’events’を渡します。

$._data()は、dataの前にアンダースコアが入る点、第1引数はjQueryオブジェクトではなく、DOM要素で渡す点に注意します。

DOM要素は、jQueryオブジェクトが1つの場合、後ろに[0]を追加するだけで取得できます。

サンプルでは、events変数に全てのイベントが格納されます。

取得したイベントの中身は?

events変数は、イベント名をプロパティ、イベント情報の配列を値とするオブジェクトです。

events.click

プロパティとしてclickを指定すれば、クリックイベントの配列を取得できます。

events.click[0]

配列のキーに0を入力すれば、インデックスが0、つまり1番目のクリックイベント情報が取得できます。

events.click[0].handler

イベントハンドラを取得するには、キーとしてhandlerを指定します。

イベントハンドラを関数として実行するには?

$('a').on('click', function() {
    console.log('クリックされました');
    
    return false;
});

let events = $._data($('a')[0], 'events');

events.click[0].handler();

a要素にクリックイベントを追加し、$._dataでイベントを取得した後、関数を実行しています。

events.click[0].handlerが関数を参照するため、末尾に()を追加すれば、関数として動作します。

イベント一覧

HTMLのDOMイベントを一覧としてまとめました。

ユーザーインターフェースイベント

beforeunloadドキュメントがアンロードされる直前。ページを移動する直前が典型。
loadオブジェクトがロードされたとき
pagehideユーザーがウェブページから離れたとき
pageshowユーザーがウェブページを表示したとき
resizeドキュメントのビュー、つまりブラウザがリサイズされたとき
scroll要素のスクロールバーがスクロールされたとき
unloadbody要素につき、ページがアンロードされたとき

アニメーションイベント

animationendCSSアニメーションが完了したとき
animationiterationCSSアニメーションがリピートするとき
animationstartCSSアニメーションが開始したとき
transitionendCSSトランジションが完了したとき

フォームイベント

changeフォーム要素(input, select, textarea)のコンテンツ、選択、チェック状態が変更されたとき
inputユーザーが要素に入力したとき
invalid要素のバリデーションに失敗したとき
selectユーザーがinput, textarea要素でテキストを選択した直後
resetフォームがリセットされたとき
search検索フィールド(<input type=”search”>)にユーザーが何かを入力したとき
submitフォームが送信されたとき

フォーカスイベント

blur要素のフォーカスが外れたとき
focus要素にフォーカスされたとき
focusin要素にフォーカスされる直前
focusout要素のフォーカスが外れる直前

マウスイベント

click
ユーザーが要素をクリックしたとき
contextmenuユーザーが要素を右クリックし、コンテキストメニューを開いたとき
dblclickユーザーが要素をダブルクリックしたとき
mousedownユーザーが要素上でマウスボタンを押したとき
mouseenter要素上にポインタが移動したとき
mouseleave要素からポインタが離れたとき
mousemove要素上でポインタが動いたとき
mouseoutユーザーが要素からマウスポインタを動かし、その子要素の1つを離れたとき
mouseoverポインタが要素かその子要素上に移動したとき
mouseupユーザーが要素上でマウスボタンを離したとき
mousewheel非推奨です。代わりにwheelイベントを使いましょう。
wheel要素上でマウスホイールが動いたとき

キーボードイベント

keydownユーザーがキーを押しているとき
keypressユーザーがキーを押したとき
keyupユーザーがキーを離したとき

タッチイベント

touchcancelタッチがキャンセルされたとき
touchendタッチスクリーンから指が離れたとき
touchmoveスクリーン上を指でドラッグしたとき
touchstartタッチスクリーンに指が置かれたとき

ドラッグイベント

drag要素がドラッグされたとき
dragendユーザーが要素のドラッグを終了したとき
dragenterドラッグされた要素がドロップターゲットに入ったとき
dragleaveドラッグされた要素がドロップターゲットを離れたとき
dragoverドラッグされた要素がドロップターゲット上に移動したとき
dragstartユーザーが要素のドラッグが開始したとき
dropドラッグされた要素がドロップターゲットにドロップされたとき

クリップボードイベント

copyユーザーが要素のコンテンツをコピーしたとき
cutユーザーが要素のコンテンツを切り取りしたとき
pasteユーザーが要素にコンテンツを貼り付けたとき

メディアイベント

abortメディアの読み込みが中止されたとき
canplay必要なバッファが確保され、ブラウザがメディアを再生する準備ができたとき
canplaythroughブラウザがバッファリングによる停止なしにメディア全体を再生できるようになったとき
durationchangeメディアの再生時間が変更されたとき
endedメディアが終了したとき
errorメディアの読み込み中にエラーが発生したとき
loadeddataメディアデータがロードされたとき
loadedmetadataサイズや再生時間などのメタデータがロードされたとき
loadstartブラウザが特定のメディアをロードし始めたとき
pauseユーザー、もしくはプログラム上からメディアがポーズされたとき
playメディアの再生が開始されるか、一時停止が解除されたとき
playingポーズかバッファリングの停止後、メディアが再生されているとき
progressブラウザ上でメディアをダウンロードし、データを取得しているとき
ratechangeメディアの再生速度が変更されたとき
seekedユーザーがメディアの再生位置を移動、スキップし終えたとき
seekingユーザーがメディアの再生位置を移動、スキップし始めたとき
stalledブラウザがメディアのデータ取得を試み、データが利用できなかったとき
suspendブラウザがメディアデータの取得を中止したとき
timeupdate再生位置が変更されたとき
volumechangeミュートを含み、メディアのボリュームが変更されたとき
waitingバッファの読み込み等、メディアが一時停止したとき

その他

afterprintページの印刷が開始したとき、もしくは印刷のダイアログボックスが閉じたとき
beforeprintページの印刷が開始する直前
fullscreenchange要素がフルスクリーンモードで表示されたとき
fullscreenerror要素がフルスクリーンオードで表示できなかったとき
hashchangeURLのアンカー部分が変更されたとき
messageEventSourceからメッセージを受け取ったとき
offlineブラウザがオフラインになったとき
onlineブラウザがオンラインになったとき
openEventSourceのコネクションが開始したとき
popstateウィンドウの履歴が変更されたとき
showmenu要素がコンテキストメニューとして表示されたとき
storageWeb Storageの領域が更新されたとき
toggleユーザーがdetails要素を開閉したとき

まとめ

  • イベントハンドラとは、イベントが発生したときに行われる処理のことです。
  • イベントを追加するには.on(), .one(), 削除するには.off()を使用します。
  • イベントを発火するには、.trigger()を使用します。
  • イベントをキャンセルするには、コールバック関数でfalseを返します。
  • イベントを取得するには、$._data()を使用します。

実践カテゴリの最新記事