【jQuery】基礎③　イベント

2023.11.30

【jQuery】基礎③　イベント

JoeによるPixabayからの画像

基本構文

jQueryでは「.on」メソッドを使ってイベントを設定します。

$("セレクタ").on("イベント", function(){
  //処理
});

例）以下は、要素にマウスが乗るとアラートが出る例です。

$("#target").on("mouseover", function(){
  alert("要素にマウスが乗りました！");
});

「.on()」を使わなくても、「.click()」「.mouseover()」などイベント用のメソッドはあります。

しかし、「.on」の方が汎用的なので、特に理由がなければ「.on」がおすすめです。

イベント	イベントのトリガー
click	クリック時
dblclick	ダブルクリック時
mousedown	要素上でマウスが押された時
mouseup	要素上でマウスが押され、上がった時
mouseover	要素にマウスが乗った時
mouseout	要素からマウスが離れた時
keydown	キーを押し込んだ時例）$(window).on(‘keydown’,function(e){ alert(e.key); });
keyup	キーを離した時
load	ページの読み込みが完了した時
resize	ウィンドウのサイズが変わった時
scroll	画面がスクロールされた時
focus	要素がフォーカスされた時
change	要素がフォーカスされ、フォーカスが外れた時
submit	フォームが送信された時
error	javascriptのエラーが発生した時

jQueryのイベントについては以上です。