Help us understand the problem. What is going on with this article?

【jQuery】onメソッドの使用方法

More than 3 years have passed since last update.

ドキュメント

jQuery APIドキュメント(公式)
jQuery APIドキュメント(日本語)

基本の使用方法

.on( events [, selector ] [, data ], handler )

jQueryオブジェクトにイベント処理を紐付けることができる。

引数 データ型 説明
events String 複数のイベントを設定できる。
selector String 選択jQueryオブジェクトの子孫要素を設定することでイベントデリゲートできる。
data Anything イベントハンドラに渡したいデータをハッシュで指定できる。
handler Function eventsが起きたタイミングで実行されるイベントハンドラ。

eventsで複数のイベントを設定

半角スペース区切りで複数のイベントを設定

$('.foo').on('click blur', function(){...});

設定できる主なイベントは下記。
http://pentan.info/javascript/event_handler.html
http://phpjavascriptroom.com/?t=js&p=event

また、.trigger()で設定したカスタムイベントを使用することも可能。

連想配列にしてイベントごとに異なる処理を設定

$('.foo').on({
  'mouseenter': function(){...},
  'mouseleave': function(){...}
});

selectorでイベントデリゲート

$("ul").on("click","li",function(){
    alert($(this).text());
});

イベントデリゲートとは子要素に対して起こしたイベントが親要素に次々と伝播していくイベントバブリングというjavascriptの特徴を利用したイベントの書き方である。
これを利用すれば、子要素に対して起こしたいイベントを親要素に対して設定できる。
メリットはスクリプトで後から追加するものに対してもイベントを書けること、メモリの節約の2つである。

$("li").on("click",function(){
    alert($(this).text());
});

先ほどのスクリプトはこう書くのと同じだが、こちらはli全てに対し処理を設定するのに対して、先ほどのスクリプトはulひとつにのみ処理を設定している。

$('.parent').on({
  'mouseenter': function(){...},
  'mouseleave': function(){...}
}, '.foo');

もちろん、eventsとselectorの合わせ技も可能。

dataを処理したいイベントハンドラに渡す

for (var i = 0; i < 3; i++) {
  $('button').eq(i).on('click', { value: i + 1 }, onClick);
}

function onClick(e) {
  alert(e.data.value + '番目のボタンをクリックしました');
}

イベントが実行されたときにイベントオブジェクトを通して、event.dataにその値が格納され、イベントハンドラから扱えるようになる。

offによる解除

$('button').on('click', function() {
  alert('クリックされました');
});

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

bind、live、delegateについて

bindはonと似ているがスクリプトで後から追加したものには対応できない。
liveとdelegateはスクリプトで後から追加したものに対応できる。
liveとdelegateでは書き方が若干異なる。
全てonで賄えるため、基本的には使用しない。

参考URL

jQuery 便利なonを使おう(on click)
jQuery の on() と off() を理解する
実践、jQuery 第1回 .on()と.off()を使いこなす 1

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away