86
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-04-15

ドキュメント

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

86
97
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
86
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?