jQueryで使われるクリックイベントについてまとめました。
clickイベントを始めとするクリックイベントは、Web制作でよく使われるイベントです。この記事で基礎知識をインプットしましょう！
また、各セクションでjQueryのイベントごとの解説記事を紹介していますので合わせてご一読ください。
マウスカーソルイベントについては下記の記事でまとめています。
- jQueryのクリックイベントの基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
【jQuery】クリックイベントのまとめ
jQueryのクリックイベントには次のようなものがあります。
click()：クリック操作で発火するイベントdblclick()：ダブルクリックされた際に、登録したイベントを発火mousedown()：マウスが押されたときにイベントが発火mouseup()：マウスが押された状態から離されたときにイベントが発火contextmenu()：右クリックでイベントを発火
それぞれのイベントについて簡単に紹介していきます！
click()イベントについて
click()イベントは、クリック操作で発火するイベントを実行します。
基本書式
$('セレクタ').click(function(){
// ここにクリックしたら発火する処理を記述する
});コードを実際に当てはめると、下記のようになります。
click()イベントのサンプル
<button id="js-btn">ボタンクリックでアラートが出る</button>const btn = $("#js-btn");
btn.click(function () {
alert('クリックされました！');
});出力結果
See the Pen click-alert by ZeroPlus (@zeroplus-programming) on CodePen.
click()については下記の記事で詳しく解説していますので、ご一読ください。
dblclick()イベントについて
dblclick()イベントは、ダブルクリックされた際に、登録したイベントを発火することができます。
基本書式
$('セレクタ').dblclick(function(){
// ここにダブルクリックしたら発火する処理を記述する
});コードを実際に当てはめると、下記のようになります。
dblclick()イベントのサンプル
<button id="js-btn">ボタンダブルクリックでアラートが出る</button>const btn = $('#js-btn');
const box = $('.box');
btn.dblclick(function () {
alert('ダブルクリックされました');
});出力結果
See the Pen dblclick-alert by ZeroPlus (@zeroplus-programming) on CodePen.
上のコードの場合、ボタンを1回クリックしても何も起きませんが、ダブルクリックするとalertメソッドによってアラートが出るようになります。
dblclick()については下記の記事で詳しく解説していますので、ご一読ください。
mousedown()イベントについて
mousedown()イベントは、マウスが押されたときにイベントが発火します。
mousedown()の基本書式
$('セレクタ').mousedown(function(){
// ここに処理を書く
});コードを実際に当てはめると、下記のようになります。
mousedown()のサンプル
<button id="js-btn-down">mousedown!</button>const btnDown = $('#js-btn-down');
btnDown.mousedown(function () {
console.log('down');
});出力結果
mousedown()については下記の記事で詳しく解説していますので、ご一読ください。
mouseup()イベントについて
mouseup()イベントは、マウスが押された状態から離されたときにイベントが発火します。
mouseup()の基本書式
$('セレクタ').mouseup(function(){
// 処理を書く
});コードを実際に当てはめると、下記のようになります。
mouseup()のサンプル
<button id="js-btn-up">mouseup!</button>const btnUp = $('#js-btn-up');
btnUp.mouseup(function () {
console.log('up');
});出力結果
mouseup()については下記の記事で詳しく解説していますので、ご一読ください。
contextmenu()イベントは、右クリックでイベントを発火することができます。
基本書式
$('セレクタ').contextmenu(function(){
// 処理の内容を記述
});コードを実際に当てはめると、下記のようになります。
contextmenu()のサンプル
<button id="js-more">右クリック！</button>const more = $('#js-more');
more.contextmenu(function () {
alert('ok');
});
出力結果
See the Pen contextmenu by ZeroPlus (@zeroplus-programming) on CodePen.
mouseup()については下記の記事で詳しく解説していますので、ご一読ください。
まとめ
jQueryのクリックイベントについてまとめてみました。特にclick()イベントはWeb制作でよく使われるので、必須知識です。
イベントの数は多いですが、暗記しようとせず実際に手を動かして覚えていきましょう。
jQueryクリックイベントまとめ
click()：クリック操作で発火するイベントdblclick()：ダブルクリックされた際に、登録したイベントを発火mousedown()：マウスが押されたときにイベントが発火mouseup()：マウスが押された状態から離されたときにイベントが発火contextmenu()：右クリックでイベントを発火
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
