[jQuery] on() off() の使い方

[jQuery] on() off() の使い方:

イベントって何？

イベントというのは、例えば、ボタンをクリックしたり、キーを打ったり、マウスカーソルを動かしたりとかの動作のことです。

on()は指定したイベントに対して何かしらの処理を設定できる機能になります。

因みに、on()で指定できるイベントの一覧はこちらがよくまとまってました。

これもよく忘れちゃうのよね...

clickとの違い

同じようなファンクションにclick()とかがありますね。

例えば、下記のコードはそれぞれ結果は同じです。

$('button').click(function() { 
 console.log('clicked'); 
}) 

$('button').on('click', function() { 
 console.log('clicked'); 
}) 

だったらclick（）でええやん、微妙にコード少ないやん、とも思いますが、
on()の方が以下のことが実現できるので有用性が高いです。

• 複数のイベントで同じ処理を設定したい
• 複数のイベントで別々の処理を設定したい

それぞれ書き方は以下のようになります。

複数のイベントで同じ処理を設定したい

$('button').on('keydown keyup keypress change', function() { 
 console.log('changed'); 
}) 

複数のイベントで別々の処理を設定したい

$('button').on({ 
  'keyup': function(){ 
    console.log('keyuped'); 
  }, 
  'mouseleave': function(){ 
    console.log('mouseleaved'); 
  } 
}); 

はい、便利ですね。

oｆｆ()とは？

ついでにoff()の使い方も簡単に説明します。
off()はon()で登録したイベントを解除する時に使います。

$('button').on('click', function() { 
 console.log('clicked'); 
}); 
$('button').off('click');