【jQuery】イベント処理について深く理解する。

例えば、jQueryでマウスオーバーのイベント処理を書くときは、下記のように記載すると思います。

$(function() {
 $('li a')
 .mouseover(function() {
   $(this).attr('src', '../images/open.gif');
 })
 .mouseout(function() {
    $(this).attr('src', '../images/close.gif');
 });
 });

ですが、なぜこのような定型文になっているか、不思議に思う部分はありませんかね。

$(this)について

「$(this)」は、何となく、オブジェクト自身をさしているということを理解されている方も多いと思いますが、だいたいあっています。

正確な理解としては、「$(this)」は、「イベントが発生した要素そのものを示すjQueryオブジェクト」です。上の例で言えば、「mouseoverイベント」、「mouseoutイベント」共に、「li a」という要素が「$(this)」になります。

関数の変数代入も可能

これは、jQueryというよりは、JavaScriptの知識になりますが、変数の中に、関数を代入することが可能ですので、下記のようにjQueryの記述とは分けて書くことも可能です。

<script type="text/javascript">
$(function() {
var onmouseover = function() {
$(this).attr('src', '../images/open.gif');
};

var onmouseout = function() {
$(this).attr('src', '../images/close.gif');
};

$('li a')
.mouseover(onmouseover)
.mouseout(onmouseout)
});
</script>

clickイベントと、onイベントの違いには要注意！

いずれも、マウスをクリックした際のイベント処理を記述しますが、その違いには注意です。

clickイベントの場合

$(‘#button’).click(

function(){

aleart('テスト');

});

onイベント

$(document).on(‘click’,’#button’,function(){
alert(‘テスト’);
});

上記全く同じように見えますが、少し違います。

clickイベントは、「ページロード時に読み込まれた要素のみに有効」で、onイベントは、「ページロード後も、動的に生成された要素にも有効」なのです。なので、安易にクリックされた後に動作するイベントだからといって、clickイベントを選んでしまうと動かないということになるので、要注意です！