【jQuery入門】イベント処理の基礎

イベントに対応する処理を記述する

$(function(){...})は以下コードの略

$(document).ready(function () {
})

$(document)のdocumentはブラウザに表示されているページそのものを表すブラウザ標準のオブジェクト。これを$()関数で囲むことで、ページそのものを表すjQueryオブジェクトを生成できる

そして、readyメソッドはreadyというイベントが発生したタイミングで、指定された処理を実行しなさい、という意味。function(){...}は、JavaScriptで処理のかたまりを表す場合の決まりごと

$(...)で表される要素セットでイベントが発生した場合に、これそれの処理を実行しなさい、ということ。イベントに対応する処理のことを、イベントを待ち受けるものという意味でイベントリスナーとも言う

マウスポインターの出入りによって処理を実行する

イベントの処理も$(function {...})の中に記述する

イベントによる処理を定義する場合も、これまでと同じく$(function{...})の中に記述しなければならない
というのも、$()関数はページ全体が読み込まれていないと、正しく目的の要素を取得できないため。

マウスポインターが要素に出入りしたタイミングで処理を行う

マウスポインターがある要素に重なったタイミングで処理を行いたい場合には、mouseenterというイベントを、逆に要素からマウスポインターが外れたタイミングで処理を行うにはmouseleaveというイベントを利用する

イベントの発生元を表すのはthisキーワード

thisというのはとにかく難しいキーワードで、その時々の文脈で指す対象が変わることから、熟練者でも混乱の原因となる

イベント処理の中では、thisは「イベントが発生した要素」を表す

<div>
  <p><img id="img" src="https://placehold.jp/50x50.png" alt=""></p>
</div>

$(function () {
  $("#img")
    .mouseover(function () {
      $(this).attr("src", "https://placehold.jp/70x70.png");
    })
    .mouseleave(function () {
      $(this).attr("src", "https://placehold.jp/50x50.png");
    });
});

See the Pen
jQuery9-2 by shinjiezumi (@sezumi)
on CodePen.

イベント処理だけを独立させて記述する

イベント処理を定義する場合は、以下のように処理だけを独立させて書くこともできる

<div>
  <p><img id="img2" src="https://placehold.jp/50x50.png" alt=""></p>
</div>

$(function () {
  const onmouseover = function () {
    $(this).attr("src", "https://placehold.jp/70x70.png");
  };
  const onmouseleave = function () {
    $(this).attr("src", "https://placehold.jp/50x50.png");
  };
  $("#img2").mouseover(onmouseover).mouseleave(onmouseleave);
});

See the Pen
jQuery10-1 by shinjiezumi (@sezumi)
on CodePen.