批評onメソッドによるイベントハンドラー[メソッドチェーン][jQuery]2017年8月12日JavaScriptjQueryのonメソッドを利用した、クリックやマウスオーバーなどの基本的なイベント処理の実装や、動的に生成した要素に対してのイベント処理についての説明をいたします。スポンサーリンクonメソッドの基本的な構文は下記のようになります。別の構文については、本記事の最後の方で説明します。function(){処理});$(セレクタ)はjQueryオブジェクトです。このオブジェクトに対してクリック等のイベントが発生した場合に、関数(function〜)が実行されます。イベントが発生したタイミングで実行される関数をイベントハンドラーと呼びます。下記のデモ画面1では黄色の要素領域をマウスオーバーすると緑色に変化します。'green');});});</script></body></html>デモ画面2では、マウスオーバーの他に、マウスアウト(mouseout)およびクリック(click)によるイベントもメソッドチェーンによる記述で追加実装しています。id="sample"></div>');$('body').append(element);});});</script></body></html>27〜29行目マウスアウトすると、背景色を元に戻るようにしています。cssメソッドの第2引数に何も指定しないと、はじめの状態に戻ります。id=”sample”></div>要素を生成しbody内に追加しています。id=”sample”></div>」要素に対して、マウスオーバー(mouseout)およびマウスアウト(mouseout)のイベントを追加実装してみます。'');})});15〜21行目(失敗)デモ画面2コードに15〜21行目を追加しています。新しく生成される要素に対して、マウスオーバー時には背景が黄色、マウスアウトすると緑色に戻るように実装しようとしています。ところが実際には色は変わりません。この様に後から追加/生成する要素に対してイベントを割り当てるには、onメソッドによる以下のような構文で記述する必要があります。実際の挙動はデモ画面3で見ることができます。function(){処理});「親セレクタ」内の「子セレクタ」に対し、イベント(名)が生じた場合のイベントハンドラーを割り当てています。'');})});</script></body></html>35〜41行目ボタンをクリックしたことによってドキュメント内に生成された「#sample」要素に対して、マウスオーバーおよびマウスアウト時のイベントハンドラーを割り当てています。