2018.07.01

【jQuery】clickイベント・hoverイベントの使い方

目次

clickイベントとは

clickイベントは、要素をクリックしたときの処理を指定するイベントです。
書き方は下の通りで、{}の中にクリックしたときの処理を書いていきます。

$("#btn").click(function() {
	//クリックしたときの処理
});

下に簡単な例を示しておきます。

これで、#btnをクリックしたときに、文字の色がblueになるようになりました。
もちろん、処理の部分のセレクタはclickイベントのセレクタと別のものにしても構いません。
処理の部分の文末に(;)を付けるのはもちろんですが、clickイベントの文末にも(;)が必要なことに注意しましょう。

hoverイベントとは

hoverイベントは、要素にマウスが乗ったときの処理外れたときの処理を指定するイベントです。
書き方は下のようになります。hover()の中にfunction(){}をコンマで区切って2つ入れるイメージです。一つ目の{}の中にはマウスが乗ったときの処理を、2つ目にはマウスが外れたときの処理を書きます。

$("#btn").hover(
	function() {
		//マウスが乗ったときの処理
	},
	function() {
		//マウスが外れたときの処理
	});

CSSにも:hover疑似クラスがあるじゃないかと思うかもしれませんが、このhoverイベントでしかできない処理もあります。
例えば、2つ目のfunctionの中を空欄にすれば、マウスが外れたときでもマウスが乗ったときの処理をそのまま継続できますし、addClass()・removeClass()でのクラスの付け替えはhoverイベントでしかできません。

thisの使い方

例えば、同じ種類の要素がいくつかあり、クリックした要素だけに処理を適用させたかったとします。具体的には、下のような場合です。
クリックしたボタンだけの色を変えたかったとしても、1つの.btnをクリックすれば全ての.btnの色が変わってしまいます。


これを解決するには、セレクタを「this」にすればOKです。

これで、クリックした「その」要素だけに処理が適用されるようになりました。
このように、「this」はそのイベントが起こった要素だけを取得できる便利なもので、hoverイベントにも使うことができます。

「this」はクオーテーション(”や’)で囲わず、そのまま書くことに注意しましょう。

home

scroll