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

jQuery 便利なonを使おう(on click)

More than 3 years have passed since last update.

対象者

click()とon('click', function())の違いが分からない人。
click()しか使ったことのない人。
何も考えずにon('click', function())を使っている人。

onの有用性

クリックイベントを書くとき

$('p').click(function(){
     hogehoge;
});

のような記述が出来る。

はたまた、

$('p').on('click',function(){
     hogehoge;
});

とも記述できる。

果たして、onは何が良いのか。
******
onの有用性
1.追加要素へのイベント(さまざまなイベントへの汎用性)
2.複数のイベント
*****

※onはjQuery1.7以降

1.さまざまなイベントへの汎用性

onはbind、live、delegateを統合したものである。

bind

ー基本的なイベントの設定

$('p').bind('click',function(){
     hogehoge;
});
$('p').unbind('click');

★onで書くと…

$('p').on('click',function(){
     hogehoge;
});
$('p').off('click');

live

ー後から追加した要素にもイベントを実行させる(documentにイベント設定)

$('p').live('click',function(){
     hogehoge;
});
$('p').die('click');

★onで書くと…

$(document).on('click','p',function(){
     hogehoge;
});
$(document).off('click','p');

delegate

ー後から追加した要素にもイベントを実行させる(親要素にイベント設定)

$('p').delegate('a','click',function(){
     hogehoge;
});
$('p').undelegate('a','click');

★onで書くと…

$('p').on('click','a',function(){
     hogehoge;
});
$('p').off('click','a');

liveとdelegeteって何をしているの?

例えば、bindを使うときは、ページを表示時に既に存在する要素に対してイベントを設定する。そのため、後に追加した要素にはイベントが設定出来ない。
それを解決するのが、live、delegate。この2つは、イベントを指定したい要素に直接設定するのではなく、親要素を使って間接的にイベントを設定する。
例えば、下記のように<a></a>の要素を追加したとすると、
<p></p>

<p><a></a></p>

$('a').bind('click',function(){
     hogehoge;
});

とbindで記述してもクリックイベントは実行出来ない。ここで、

$('p').delegate('a','click',function(){
     hogehoge;
});

と親要素のpにイベントを設定することで間接的にイベントを設定することが出来る。
つまり、pに「中身のaにはクリックイベントをつける」というイベントを設定しているわけ。

liveはdelegateの親要素をdocumentと設定しているだけ。
つまり

$('a').live('click',function(){ 

$(document).delegate('click',function(){ 

は一緒。

liveとdelegateって何が違うの?

delegateの中にliveが含まれると考えればオーケー。
liveは後で追加した要素にイベントを付与するとき手軽に(bind と同じ間隔で)イベントを実行出来る。
では、なんでdelegateがあるのかというと、実行速度が速いのです。
liveは内部でdelegateを実行しているわけで、一手多いのです。

参考

実行順 bind→delegate→live
実行速度 delegate→live→bind (意識するほどの差はない)

※live、dieはjQuery1.9で廃止

2.複数のイベント

onで複数のイベントを設定する

・同じ処理をする

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

ースペース区切りでオーケー。

・別々の処理をする複数イベント

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

・イベントデリゲートで複数イベントを設定する

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

結論

結論、onはbind、live、delegateのいいとこ取りです、onを使いましょう。

参考URL
jQuery の on() と off() を理解する
bindとlive, delegateの違い。そしてon。
clickとbindとliveとdelegateとonの違い

shizuma
web&DeepLearningエンジニア。 ACES.inc←東京大学大学院/東京←鹿児島/blog https://blog.seishin55.com ; Qiita https://qiita.com/shizuma ; note https://note.mu/seishin55
https://seishin55.com
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした