jQuery - イベント

jQueryでイベント処理

イベント例

• click
• dblclick
• mousemove
• mouseenter
• keydown / keyup
• loadHTML
• scroll
• resize

  onメソッド

$(要素).on(イベント, () => {
  // 処理
});

onメソッドに複数のイベントを設定

オブジェクトでキーにイベント名、値に処理内容を渡す方法

$('div').on({
  'click': () => { /* クリック時の処理 */ },
  'dblclick': () => { /* ダブルクリック時の処理 */ },
  'mouseenter': () => { /* マウスカーソルが入ったときの処理 */ },
  'mouseout': () => { /* マウスカーソルが離れたときの処理 */ },
});

イベントオブジェクトのtypeプロパティを使う方法

e,event オブジェクト(イベントの内容が入ったオブジェクト)のtype属性にイベントのタイプが格納されている。

$(document).on('click keydown', (e) => {
  if(e.type === 'click'){ /* クリック時の処理 */ }
  if(e.type === 'keydown'){ /* キーが押されたときの処理 */ }
});