日々のメモ帳

プログラミングで学んだ事や趣味でやっている事などを記録しています。

jQueryに触れてみる その1(イベント編)

codeprep.jp

 

 どういう風に勉強しようか悩んでましたが、悩んでいる時間が勿体ないのでとりあえず手を動かそうと思ってCODEPREPをやってました。自分のPCでjQuery使えるようにするのは後日の自分に任せます(遠い目)……

 

 このブックの自分用の復習メモ。

・イベントを試す 1-1

 jQueryのイベントは$(セレクタ).on.(イベント名、イベントハンドラ)という形式で
記載します。イベント名には扱いたいイベントの名前を文字列で指定します。
イベントハンドラには、そのイベントが発生した時に実行したい関数を指定します。


jQuery(fn)もイベントの1つ 1-2

 jQueryセレクタを理解するブックでも良く登場していた、$(document).ready(function() {})や、このチャプターで登場する$(function() {…})といった書き方は、実はイベントなのです。これらの書き方は、DOM要素にアクセスする準備が整ったら発生するDOMContentLoadedというイベントを扱います。


イベントオブジェクトの構造 1-3

イベントハンドラには、イベントの情報を表すイベントオブジェクトが引数として渡ってきます。

 

・currentTarget
 → クリックされた要素

・target
 → イベントハンドラを指定した要素

・pageX
 → ページ全体に対する、クリックしたX座標

・pageY
 → ページ全体に対する、クリックしたY座標

・altKey
 → Altキーを押しながらクリックしたか否か

 

 復習も兼ねて読んだので残しておく。

 

postd.cc


・一度しか動作しないイベントハンドラを設定する 1-4

これまでのイベントは、クリックする度にイベントハンドラが呼ばれていました。
クリックする度にではなく、一度だけイベントハンドラを実行したい場合に使える
.oneメソッドがあります。

・on
 → イベントが発生する度にイベントハンドラが呼ばれる

・one
 → イベントが発生した最初の一回だけイベントハンドラが呼ばれる


セレクタに対してイベントを設定する 1-5

jQueryのイベントは、セレクタで取得した要素だけでなく、セレクタ自体に設定することも可能です。プレビューボタンンは、クリックする度にactiveというクラスが付与/削除されます。

・要素にイベントを指定する
 → イベントハンドラを設定する時短でセレクタにマッチした要素にだけイベントハンドラが指定される。

セレクタにイベントを指定する
 → イベントハンドラを設定する時点で存在しない要素に対してもイベントハンドラを指定する。


・マウスオーバーを検知する 2-3

ボタンをマウスオーバーした時のイベントハンドラを設定してみる。マウスオーバーのイベント名はmouseenterです。


・マウスアウトを検知する 2-4

ボタンからマウスアウトした時のイベントハンドラを設定してみましょう。マウスオーバーのイベント名はmouseleaveです。


・マウスボタンが押下されたことを検知する 2-6

clickイベントとは異なり、マウスを押下した時(マウスを離す前)に発生するイベントハンドラを設定してみましょう。マウスボタンが押下された時のイベント名はmousedownです。


・マウスボタンが離されたことを検知する 2-7

マウスボタンが離された時に発生するイベントハンドラを設定してみる。マウスボタンが離された時のイベント名はmouseupです。


・要素がフォーカスされたことを検知する 4-1

要素がフォーカスされた時のイベントハンドラを指定してみましょう。要素がフォーカスされた時のイベント名はfocusです。


・要素からフォーカスが外れたことを検知する 4-2

要素からフォーカスが外れた時のイベントハンドラを設定してみましょう。要素からフォーカスが外れた時のイベント名はblurです。


イベントハンドラを解除する 5-1

設定したイベントハンドラは、offメソッドを利用して解除できます。
既に設定されているクリックのイベントハンドラを解除してみましょう。

 

イベントハンドラは、$(セレクタ).off(イベント名, イベントハンドラ)もしくは
$(セレクタ).off(イベント名)と記述することで解除できます。

イベント名のみを与えると、要素に設定されているイベント名に対応するイベントハンドラを全て解除します。イベント名とイベントハンドラを与えると、与えたイベントハンドラのみを削除します。


・ページのスクロールをキャンセルする 5-4
スクロールをキャンセルするには、windowオブジェクトのmousewheelをキャンセルします。


・画像が読み込まれたことを検知する 6-1

loadイベントを利用すると、imgタグで指定した画像が読み込まれた時のイベントハンドラを設定できます。例えば、画像のサイズを取得して処理を行う場合、画像が読み込まれてからサイズを取得すると、正しいサイズを取得できるようになります。