スポンサーリンク
スポンサーリンク

対象の要素を絞ってイベントを登録する

jQuery

今回紹介するon()は、
これまでの記事で紹介したイベントを別の書き方で
設定できるメソッドです。

基本的な書き方はone()と同様で、イベントの発生条件には、
click,dblclick,mouse****等のイベントを感知する命令を
指定します。その後、「,」カンマで区切り、
function(){…}に実行したい処理を書きます。

$(セレクター).on(イベント発生の条件,function(){
 イベント発生時に実行する処理
});

one()と異なる点は、ここで設定した処理はイベントが
発生するたびに実行されます。

サンプルコードを実行すると、以前書いた
mouseover/mouseoutの記事と同様の処理が行われます。

青い四角に、マウスのカーソルをのせると黄色に
黄色四角から、マウスのカーソルをどけると青に戻ります。

実行結果はこちらです。

mouseover(function(){…})とon(“mouseover”,function(){…})は
同じ処理をします。

on()には別の機能があります。イベントの発生条件の後ろに
「イベントが発生する要素」
を指定できます。

サンプルコードでは、ul要素内のa要素がクリックされたときに、
img要素のsrc,altの属性を書き換えています。
セレクターで指定した要素内にある特定の要素でイベントが
発生した時だけ、処理を行える機能がon()にあります。

なぜ、その書き方をするかはメリットがあるからです。
この方法だと、実行した時点ではHTMLに存在していない要素、
将来追加される要素にもイベント処理が追加できるからです。

分かりにくいのでサンプルコードのご覧ください。
50~56行目のコメントアウト外して
57~63行目をコメントアウトしてください。

そしてじっこうすると、
ul要素を使って猫のリストが並んでいます。
そして猫の名前をクリックすると、猫の画像が
切り替わります。

ですが、「画像を追加」ボタンをクリックして、
「ぶち猫」をクリックすると、画像が置いてある
URLへジャンプしてしまいます。

なぜ、そうなるのかというと、
a要素のイベント処理は、$(function(){…})でHTMLが
ブラウザーに読み込まれた時点で設定しています。この時点では
「ぶち猫」はa要素に存在していないからです。

イベント設定時に存在しなかった要素にも
on()命令を使うとイベント処理を適用できます。

50~56行目のコメントアウトしてください。
57~63行目をコメントアウトを外してください。

そうすると、追加したぶち猫の画像も切り替わり
別のページに飛ばされることもなくなります。

on()がセレクターで指定したul要素の内側に
ある要素がクリックされたときに、その要素が
「イベントが発生する要素」かどうかで処理するか
否かを判定しているからです。

コメント

タイトルとURLをコピーしました