on()/off()
概要
on()メソッドは引数にイベント名とコールバック関数を指定する。登録されたイベントに対して対応するコールバックが実行されるようになる。
off()メソッドは引数にイベント名と、オプションでコールバック関数を指定する。コールバックを指定した場合はその関数だけが削除され、指定しなければDOMのすべてのリスナーが削除される。
書式
[DOM].on('event', callback)
[DOM].off('event'[, callback])
実行例
以下のHTMLでは、2つのp要素と3つのボタンを配置する。
- Switchボタンには、あらかじめボタンのクリックに対してp1の表示を切り替えるリスナーが登録されている
- AddボタンはSwitchボタンに、p2の表示を切り替えるもう1つのリスナーを登録する
- DeleteボタンはSwitchに登録された特定の／あるいは全てのリスナーを削除する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>on/off listener manipulation</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> onSwitch1 = () => { content = $('#p1').text(); $('#p1').text( content === 'nail' ? 'snail' : 'nail' ); } onSwitch2 = () => { content = $('#p2').text(); $('#p2').text( content === 'nail' ? 'snail' : 'nail' ); } onAdd = () => { console.log('onadd') $('#switch').on('click', onSwitch2); } onDelete = () => { //$('#switch').off('click', onSwitch2); $('#switch').off('click'); } $(() => { $('#add').on('click', onAdd); $('#delete').on('click', onDelete); $('#switch').on('click', onSwitch1); }); </script> </head> <body> <p id="p1">nail</p> <p id="p2">snail</p> <div> <button id="add">Add</button> <button id="delete">Delete</button> <button id="switch">Switch</button> </div> </body> </html> |
off()にリスナーを指定した場合、Deleteボタンを押すとp2が反応しなくなるがp1は反応し続け、Addボタンを押すとp2の反応も復活する。
off()にリスナーを指定しない場合、Deleteボタンを押すとp1とp2のどちらも反応しなくなる（Switchボタンのリスナーが2つとも削除されるため）。その後Addボタンを押すとp2の反応だけが復活する。
特定イベント専用のリスナー
概要
たとえばclickイベントの場合、DOMのメソッドとしてclick()が準備されていて、その引数にリスナーを指定して登録できる。
実行例
以下の例は、p要素に対してmouseoverとmouseleaveの二つのイベントに対するリスナーを登録する例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>click and mouseover</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> onMouseover = () => { $('p').text('over'); } onMouseleave = () => { $('p').text('left'); } $(() => { $('p').mouseover(onMouseover); $('p').mouseleave(onMouseleave); }); </script> </head> <body> <p style="background-color: #0cc">I am here</p> </body> </html> |
リスナーにデータを渡す
リスナーに直接引数を指定して渡すことはできないが、eventオブジェクトを通じてデータを渡すことができる。
- データは連想配列で、イベント名の次、コールバックの前に指定する。
- コールバックの指定時、引数にイベントオブジェクトを明示する
- コールバック内ではイベントオブジェクトのdata属性を通じてデータを取得する
書式
.on('event', {key: value, ...}, callback)
.click({key: value, ...}, callback)
実行例
以下の例は、ボタン1を押すと数値データを1つ、ボタン2を押すと数値データと文字データが1つずつコールバックに渡され、それらが表示される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Event data</title> <script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> <script> $(() => { $('#button1').on('click', {num: 123}, (event) => { $('p').text('number:' + event.data.num); }); $('#button2').click({num: 456, str: 'ABC'}, (event) => { $('p').text('number:' + event.data.num + ' / string:' + event.data.str); }); }); </script> </head> <body> <p>ここに表示</p> <button id="button1">ボタン1</button> <button id="button2">ボタン2</button> </body> </html> |