jQuery イベント

※詳細はhtmlイベント一覧参照

イベントをキャッチ

<input type="button" id="btnTest" value="aaa" />

$(function(){
  $('#btnTest').on('click' , function(){
    ~
  });
});
以下の様な書き方も可
$(function(){
  $('#btnTest').click(function(){
    ~
  });
});

$(function(){
  $('#btnTest').on('click' , (セレクタ) , function(){
  $('#btnTest').on('click' , 'input:not(.allow_submit)' , function(){
    ~
  });
});
“input:not(.allow_submit)”

サブルーチン呼び出し
function subRoutine(){
  window.alert('OK');
}
$(function(){
  $('#btnTest').click(function(){
    subRoutine();
  });
  または
  $('#btnTest').click(subRoutine);
  $('#btnTest').on('click',subRoutine);

});

イベントを発生させる

<input type="button" id="btnTest" value="aaa" />
先にイベントを書いておく

$(function(){
  $('#btnTest').trigger('click');
});

イベントのキャンセル

$(document).on("keypress", function (event) {

  イベント(この場合、全キー押下)をキャンセル
  event.preventDefault();
  

  Enterキー押下をキャンセル
  return event.which !== 13;
 }
});

特定の操作をキャンセル
$(document).on("keypress", function (event) {
 Enterキー押下時
 if (event.keyCode == 13) {
  イベント(この場合Enterキー押下)をキャンセル
  event.preventDefault();
 }
});

イベントの種類

click / dblclick
mouseout / mouseover / mousedown / mouseup / hover
mousemove
keypress / keydown / keyup
change
select
submit
focus/ blur
contextmenu
※詳細はhtmlイベント一覧参照

コメントを残す

メールアドレスが公開されることはありません。