こんにちは、ライターのマサトです！
今回は、マウスのクリック操作を検出してイベント処理を実行することができるclick()メソッドについて学習をしていきましょう！この記事では、
「click()」って何？
click()の使い方を知りたい
という基本的な疑問から、
- 「click()」と「on()」の違いについて
- toggle() / trigger()を使った活用事例
などの応用的な使い方に関しても解説していきます。この記事で、click()メソッドをしっかり学習できるように分かりやすく解説していきますのでぜひ参考にしてみてください！
「click()」とは？
それでは、まず最初にclick()について基本的な知識から学んでいきましょう！「click()」は、マウスによるクリック操作を検出して任意のイベント処理を実行させることができるメソッドになります。
一般的には、画面に配置された「ボタン」をクリックする時に使われることが多いです。例えば次のようなHTMLを見てください！
<!— 単純なボタン要素 -->
<div>
<button>ボタン</button>
</div>
<!— フォーム内のボタン要素 -->
<form>
<input type="button" value="ボタン">
</form>
単純なbutton要素であったり、フォーム内に配置されたinput要素によるボタンなどがクリックされた時にclick()はよく使われます。今回は、click()メソッドの基本的な使い方から実践的な活用事例まで分かりやすく解説していきます！
click()の使い方
ここからは、実際にclick()メソッドを使ったプログラミング手法を見ていきましょう！click()メソッドの基本的な機能として、引数に関数を指定する方法と指定しない方法の2種類があります。
また、指定した関数へオブジェクトデータを渡すことも可能なので、それぞれの使い方を1つずつ詳しく見ていきましょう！
ボタンのクリックでイベント処理を行う方法
まずは、最もよく使われる方法として、ボタン要素をクリックした時に任意の関数を実行させる方法から学んでいきましょう！一般的な記述方法としては、【 対象要素.click( 関数 ) 】のように引数へクリック後に実行したい関数を指定します。
次のサンプル例を見てください！
<body>
<button>ボタン</button>
<script>
$('button').click(function() {
console.log('クリックされました！');
})
</script>
</body>
実行結果
クリックされました！
この例では、単純なボタン要素が配置されていますね。このボタンに対して、click()メソッドの関数を実行するように記述しているのが分かります。関数内にはコンソールログへ文字列を出力するようにしているので、クリックすると実行結果のようなテキストが表示されます。
このように、click()メソッドを使うと簡単にクリックイベントの処理を記述することができるわけです。
引数なしでclick関数を使う方法
今度は、引数に関数を指定しないでclick()メソッドを使う方法です。【 対象要素.click() 】のように、引数を指定しない場合は対象となる要素がクリックされた時と同じ動作を実行させることが可能です。
これにより、特定のボタンをクリックすることで別の要素がクリックされたことにしてしまうこともできます。サンプル例を見ながら、もう少し詳しく見てみましょう！例えば、次のようにボタンが2つ配置されいているとします。
<button id="btn1">ボタン１</button> <button id="btn2">ボタン２</button>
そこで、「ボタン１」をクリックすると「ボタン２」がクリックされたことになるような仕掛けを作ってみましょう！次のサンプル例を見てください！
//ボタン１のイベント処理
$('#btn1').click(function() {
$('#btn2').click(); // ボタン２をクリックする
})
//ボタン２のイベント処理
$('#btn2').click(function() {
console.log('ボタン2がクリックされました！');
})
「ボタン１(#btn1)」のイベント処理に注目してください！関数内で「ボタン２(#btn2)」に対して「click()」を実行していますよね？これにより、「ボタン１」をクリックした時に「ボタン２」がクリックされるようになるわけです。
functionにオブジェクトデータを渡す方法
「click()」メソッドの便利な機能として、引数にオブジェクトのデータを指定することができます。これにより、クリックした時に実行される関数へ任意のデータを渡すことが可能になるので幅広い使い方が実現するわけです。
使い方としては、まず最初に任意のオブジェクトを用意しておきます！
var obj = {
id: 100,
name: 'taro'
}
今回は、「id」「name」の情報だけが入った簡単なオブジェクトデータを用意しました。そして、このオブジェクトデータ「obj」をclick()メソッドの引数に指定すれば良いのです。
//click()の第1引数にオブジェクトを設定する
$('button').click(obj, function(e) {
console.log( e.data.name );
})
実行結果
taro
クリックされた時に実行される関数の引数「e」に対して、「data.name」とチェーンを繋げればオブジェクトの「name」を取得できます。任意のオブジェクトデータを用意することで、クリックされた時に表示させるメッセージなども自由に変更できるので便利ですね。
「click()」と「on()」の違いについて
jQueryには、click()メソッドと同じような機能を持つ「on()」メソッドが用意されています。この「click()」と「on()」は、何が違っていてどんな使い分けをすれば良いのでしょうか？
そもそもclick()メソッドは、マウスのクリック操作だけを検出するという違いがありますが、他にも大きく違う点が2つあります。それぞれの違いについて、詳しく見ていきましょう！
複数のイベント処理を行う場合
1つ目の相違点として、click()メソッドは1つのイベント処理しかできませんが、on()メソッドは複数のイベント処理が可能です。例えば、on()メソッドで「click」イベントと「mouseenter」イベントの2つを同時に設定してみましょう。
$('button').on('click mouseenter', function() {
console.log('イベントが実行されました！');
})
on()の引数に「click / mouseeneter」という2つのイベントを同時に登録しているのが分かりますね。これにより、ボタンとマウスカーソルの位置が重なった時とクリックされた時にイベント処理が実行されるようになります。
さらに、イベントの種類ごとに実行させる関数を変えることも可能です！
$('button').on({
'click': function() {
console.log('クリックされました！');
},
'mouseenter': function() {
console.log('マウスが重なりました！');
}
})
このようにオブジェクト構造で各イベントを定義すれば、複数のイベント処理を異なる関数を使って実行することができます。
あとから追加した要素にイベント処理を行う場合
2つ目の相違点として、プログラム上であとから追加された要素に対してイベント処理を実行できるかどうか？…という点が挙げられます。click()メソッドの場合は、最初からHTMLに定義されている要素に対してだけイベント処理を実行できます。
しかし、on()メソッドの場合はあとから追加された要素にも対応しているわけです。簡単なサンプル例を見てみましょう！
<body>
<div></div>
<script>
$('button').click(function() {
console.log('クリックされました！');
})
$('div').append('<button>ボタン</button>');
</script>
</body>
この例では、click()メソッドを使ってあとから追加されたボタン要素にイベント処理を登録しています。当然ですが、このイベント処理は実行することができません。
なぜなら、click()メソッドがあとから追加された要素に対応していないからです。このclick()メソッドの処理を、on()メソッドに変えたのが次のサンプル例です！
$('div').on('click', 'button', function() {
console.log('クリックされました！');
})
注目すべきは、on()メソッドの第2引数です。あとから追加したボタン要素である「button」が指定されていますよね？これはid属性やclass属性でもいいのですが、あとから追加する要素を引数に設定することでイベント処理を登録できます。
そして、最初からHTMLに定義されていた「div」要素にon()メソッドを記述することで、あとから追加した要素にも対応できるわけです。ここまで学んだ内容を以下のようにまとめておきます！
- クリックイベントだけを定義するならclick()メソッドが使える
- 複数のイベント、あとから追加した要素へのイベント登録はon()メソッドが使える
「click() / on()」の違いや使い分けに迷ったら、上記のポイントを思い出すようにしておきましょう！また、on()メソッドについてさらに詳しく学びたい場合は、次の記事で基本から応用技までまとめているので参考にしてみてください！
toggle() / trigger()を使った活用事例
click()メソッドの基本的な使い方を学んだところで、今度は実際によく使われる事例を見ながらさらに知識を深めていきましょう！
toggle()を使って要素を表示・非表示する方法
まず最初に、特定のHTML要素をクリックすることで表示・非表示を行うサンプル例を見ていきましょう。クリックのイベント処理は、これまで学んできた「click()」メソッドを使います。
そして、特定のHTML要素を表示・非表示させるには「toggle()」メソッドを活用するのが簡単です。toggle()メソッドの基本的な使い方やサンプル事例については、次の記事で詳しくまとめているので参考にしてみてください！
簡単なサンプル例として、ボタンをクリックするとh1タグのテキストが表示・非表示するというプログラムを作ってみましょう！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').toggle(1500);
})
</script>
</body>
ボタン要素に対して、click()メソッドでイベント処理を設定しているのが分かりますね。そして、実行する関数内において「h1タグ」にtoggle()を実行することで表示・非表示を繰り返すような処理にしています。
これにより、ボタンをクリックするたびにh1要素のテキスト文字がゆっくりと非表示になったり表示したりを繰り返すわけです。
trigger()を使って異なるイベント処理を実行する方法
今度は、trigger()メソッドを使ってclick()メソッドにクリック以外のイベント処理を実行させることが可能なので試してみましょう！trigger()メソッドについての基本的な知識や活用事例は、次の記事で詳しくまとめているので参考にしてみてください！
簡単なサンプル例として、ボタンをクリックすると入力ボックスにフォーカスされるというプログラムを作ってみましょう！これは、「clickイベント」「focusイベント」という2種類のイベント処理をtrigger()を使うことで実現している例です。
<body>
<input type="text">
<button>ボタン</button>
<script>
$('button').click(function() {
$('input').trigger('focus');
})
</script>
</body>
この例では、ボタン要素に対してclick()メソッドを使ったイベント処理を設定していますね。そして、ボタンをクリックして実行される関数の中で、input要素に対してtrigger()を実行しているのが分かりますよね？
「trigger(‘focus’)」と記述することで、focusイベントをtrigger()が代わりに実行してくれるわけです。つまり、ボタンをクリックするだけで入力ボックスにフォーカスされるので、そのまますぐに文字入力が出来るようになるのです。
まとめ
今回は、jQueryでボタンなどをマウスでクリックした時のイベント処理を実行できる「click()」について学習をしました！最後に、もう一度ポイントをおさらいしておきましょう！
- click()はマウスのクリック操作を検出して任意の関数を実行することが出来る
- 引数を指定しない場合は対象要素のクリックイベントを手動で実行することができる
- click()で設定した関数はオブジェクトデータを渡すことも可能
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
