jQueryのイベント設定と種類

jQueryのイベントと実行する関数の設定

基本的には以下の構文で、あるイベントが発生したらfunction内の処理を実行する、という処理を書く。

$(function() {

    $("セレクタ").on("イベント",  function() {

        イベントが起きた時の処理

    });

});   

例えば、idがsection1のタグがクリックされたら、

console.log("クリックされた"); を実行する場合、下記のように書く。

$(function(){

    $("section1").on("click", function(){

        console.log("クリックされた");

    });

});

 

 

jQueryのイベントの種類

jQueryのイベントはclick以外にもたくさんある。

  • click (クリックされた時)
  • dbclick (ダブルクリックされた時)
  • focus (要素がフォーカスされた時)
  • blur (要素がフォーカスを失った時)
  • load (ドキュメント内のリソースが読み込み終わった時)
  • resize (windowの大きさが変更された時)
  • scroll (ドキュメントがスクロールした時)
  • mousedown (要素上でマウスが押された時)
  • mouseup (要素上でマウスが押され、上がった時)
  • select (type属性値が”text”のinput要素、textarea要素のテキストが選択された時)
  • change (要素がフォーカスを得て値の修正が完了した時)
  • submit (フォームが送信された時)
  • keydown (キータ押し下げられた時)
  • keypress (キーが押された時)
  • keyup (キーが上がった時)