jQueryのonメソッドを利用した、クリックやマウスオーバーなどの基本的なイベント処理の実装や、動的に生成した要素に対してのイベント処理についての説明をいたします。
スポンサーリンク
onメソッドの基本的な構文は下記のようになります。また別の構文については、本記事の最後の方で説明します。
|
1 2 3 |
$(セレクタ).on('イベント名', function(){ 処理 }); |
$(セレクタ)はjQueryオブジェクトです。このオブジェクトに対してクリック等のイベントが発生した場合に、関数（function〜）が実行されます。イベントが発生したタイミングで実行される関数をイベントハンドラーと呼びます。
下記のデモ画面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 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>onメソッド</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;} #button{height:50px; width:200px; background:yellow;} </style> <head> <body> <div id="button">ボタン</button> <script> $(function(){ $('#button').on('mouseover', function(){ $(this).css('backgroundColor', 'green'); }); }); </script> </body> </html> |
デモ画面2では、マウスオーバーの他に、マウスアウト（mouseout）およびクリック（click）によるイベントもメソッドチェーンによる記述で追加実装しています。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>onメソッド</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;} #button{height:50px; width:200px; background:yellow;} #sample{height:50px; width:50px; position:relative; background:green;} </style> <head> <body> <div id="button">ボタン</button> <script> $(function(){ $('#button') .on('mouseover', function(){ $(this).css('backgroundColor', 'green'); }) .on('mouseout', function(){ $(this).css('backgroundColor', ''); }) .on('click', function(){ const element = $('<div id="sample"></div>'); $('body').append(element); }); }); </script> </body> </html> |
27〜29行目
マウスアウトすると、背景色を元に戻るようにしています。cssメソッドの第2引数に何も指定しないと、はじめの状態に戻ります。
30〜33行目
<div id=”sample”></div>要素を生成しbody内に追加しています。
関連ページ
要素の追加／移動[append][appendTo][prepend][jQuery]
生成した要素に対してのイベント処理
次にデモ画面2において、ボタンをクリックした際に新しく生成される「<div id=”sample”></div>」要素に対して、マウスオーバー（mouseout）およびマウスアウト（mouseout）のイベントを追加実装してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(function(){ $('#button') .on('mouseover', function(){ $(this).css('backgroundColor', 'green'); }) .on('mouseout', function(){ $(this).css('backgroundColor', ''); }) .on('click', function(){ const element = $('<div id="sample"></div>'); $('body').append(element); }); $('#sample') //失敗 .on('mouseover', function(){ $(this).css('backgroundColor', 'yellow'); }) .on('mouseout', function(){ $(this).css('backgroundColor', ''); }) }); |
15〜21行目（失敗）
デモ画面2コードに15〜21行目を追加しています。新しく生成される要素に対して、マウスオーバー時には背景が黄色、マウスアウトすると緑色に戻るように実装しようとしています。ところが実際には色は変わりません。
この様に後から追加／生成する要素に対してイベントを割り当てるには、onメソッドによる以下のような構文で記述する必要があります。実際の挙動はデモ画面3で見ることができます。
|
1 2 3 |
$(親セレクタ).on('イベント名', '子セレクタ', function(){ 処理 }); |
「親セレクタ」内の「子セレクタ」に対し、イベント（名）が生じた場合のイベントハンドラーを割り当てています。
|
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 45 46 47 48 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>onメソッド</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> *{margin:0;} #button{height:50px; width:200px; background:yellow;} #sample{height:50px; width:50px; position:relative; background:green;} </style> <head> <body> <div id="button">ボタン</button> <script> $(function(){ $('#button') .on('mouseover', function(){ $(this).css('backgroundColor', 'green'); }) .on('mouseout', function(){ $(this).css('backgroundColor', ''); }) .on('click', function(){ const element = $('<div id="sample"></div>'); $('body').append(element); }); $(document) .on('mouseover', '#sample', function(){ $(this).css('backgroundColor', 'yellow'); }) .on('mouseout', '#sample', function(){ $(this).css('backgroundColor', ''); }) }); </script> </body> </html> |
35〜41行目
ボタンをクリックしたことによってドキュメント内に生成された「#sample」要素に対して、マウスオーバーおよびマウスアウト時のイベントハンドラーを割り当てています。
