jQueryでクリックイベントを作るおすすめの方法【on,click】

クリックするとメニューが現れて、再度押すと隠れる動きをWebページで見たことがあると思います。クリックするとWebサイトの中身が切り替わる動きはよく使われています。jQueryではclickメソッドを使う方法とonメソッドを使う方法があります。

クリックをすると処理が実行されることをクリックイベントと言います。本記事では、jQueryでクリックイベントを作る方法を解説します。

Contents

jQueryでクリックイベントを設定する方法は２つ

clickメソッドを用いることでクリックイベントを設定できます。clickメソッドの書き方を以下に示します。

$(“セレクタ”).click(function(){
	処理
});

clickメソッドを用いれば「クリックしたら処理を行う」という動きが設定できます。しかし、clickメソッドではできないことが二つあります。

上記のコードを書く場合はonメソッドを使って設定します。詳しくは「clickとon(‘click’)どっちの方がいい？」で解説します。

onメソッドはイベントを設定します。onメソッドを用いたコードの書き方を以下に示します。

$(“セレクタ”).on(‘click’,function(){
	処理
});

onメソッドを使えば、①複数のイベント処理を行うことも②後で発生した要素に対しても動きをつけることができます。

on(‘click’)を使う方をおすすめします。汎用性が高いため、どんな場合でも使えるのが利点です。少しコードは長くなりますが、他のイベントにも使えるなど、応用が効くため、おすすめです。

また、①複数のイベント処理を設定する場合と②後から追加した要素にイベント処理を行う場合はclickイベントで設定できません。そのため、clickではコードが長くなります。例を上げてみます。

submitとclickイベントの処理が同じだった場合を想定します。

$(“button”).click(function(){
	$(this).text(“クリックされました”);
});

$(“button#submit”).submit(function(){
	$(this).text(“クリックされました”);
});

$(‘button’).on(‘click submit’,function(){
　$(this).text(“クリックされました”);
});

clickではコードを2つ分書いているのに対してon(‘click’)では1つ分になっていることが分かります。

プログラミングのコードは順次処理のため、処理の下にコードを書いたとしても動きません。例えば、buttonを押すと文字色が変わるコードを以下のように書いたとします。

$(‘button’).click(function(){
	$(‘p’).css(‘color’,’red’);
});

$(“div”).append(‘<button>色を変える</button>’);

この場合、文字色が変わることはありません。しかし、on(‘click’)の第二引数にbuttonを渡すだけで、文字色が変わるコードになります。

$(‘button’).on(‘click’,’button’,(function(){
	$(‘p’).css(‘color’,’red’);
});

$(“div”).append(‘<button>色を変える</button>’);

このようにclickではできない動きが、on(‘click’)を使うことでできるようになります。

clickイベントはjQueryでよく使います。クリックをするとメニューが出てくるアコーディオンメニューやテキストが変わったり、色が変わったりするWebサイトをよく見ると思います。Webページを制作をする上で、欠かせない機能です。

jQueryではイベントを設定しなければ自動的に動きがつきます。イベントを設定せずに、jQueryを使うことはありません。onメソッドでクリックイベントを設定できれば、他のイベントを設定する際にも応用できます。

ぜひ、参考にしてみてください。