マウスのイベントリスナー

マウスは圏外です
上の画像でマウスを移動するとマウスのイベント情報が画像の下に表示されます。ソースです。 
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    var elm;
    window.onload = function() {
      elm = document.getElementById('info');
    }

    jQuery(function($) {
      $('#square')
        .mouseenter(function() {
          $(this).attr('src', 'circle.png');
          elm.innerHTML = "圏内に入りました";
        })
        
        .click(function(e) {
          elm.innerHTML = "クリックしました<br> x= " +  e.clientX
            +" y=" + e.clientY;
        })

        .mousemove(function(e) {
          elm.innerHTML = "マウスが移動しました<br> x= " +  e.clientX
            +" y=" + e.clientY;
        })

        .mouseleave(function() {
          var a = $(this);
          a.attr('src', 'star.png');
          elm.innerHTML = "圏外にでました";
        });

      });
  </script>
</head>
<body>
  <p><img id="square" src="star.png" /></p>
  <div id="info">マウスは圏外です
</body>
</html>
セレクターはsquareです。
メソッドは、
mouseenter
mouseleave
click
mousemove
を使ってのサンプルプログラムです。
var a = $(this);
と記述しているところがありますが、$(this)って何？が知りたいとき、デバッガーでaを見ればなんだかわかります。

メソッドを以下に示します。
click() 要素をクリックした
dbcliock() 要素をダブルクリックした
mousedown() マウスボタンを押した
mouseup() マウスボタンを離した
mouseenter() マウスポインタが要素内に入った
mouseleave() マウスポインタが要素外へ出た
mousemove() 要素内でマウスポインタが移動した
mouseover() 要素にマウスポインタが重ねられた
mouseout() 要素からマウスポインタが離れた
マウスの座標を知りたいときは、
 click(function(e)
のように引数を指定すれば、e.clientX、e.clientYで取得できます。