読み込み中...

Javaで四捨五入する方法を10の実例で徹底解説

初心者向けJavaScriptクリックイベント解説 JS
2024.05.02
この記事は約20分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptのクリックイベントとは？

JavaScriptでWebアプリケーションを開発する際、ユーザーとのインタラクションを実現するために欠かせないのが「イベント」です。

中でも、最もよく使われるイベントの1つが「クリックイベント」です。

ボタンをクリックしたら、あるアクションが実行される。リンクをクリックしたら、別のページに遷移する。

こういった動作は、クリックイベントを利用することで実現できます。

○クリックイベントの基本

クリックイベントを扱うには、まずHTMLの要素に「イベントリスナー」を設定する必要があります。

イベントリスナーとは、特定のイベントが発生したときに実行される関数のことです。

JavaScriptでイベントリスナーを設定するには、addEventListenerメソッドを使用します。

例えば、button要素のクリックイベントを検知するには、下記のように記述します。

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
});

ここでは、button要素を取得し、addEventListenerメソッドを使ってクリックイベントリスナーを設定しています。

第1引数に'click'を指定することで、クリックイベントを検知します。

第2引数には、イベント発生時に実行される関数を指定します。

この例では、ボタンがクリックされると、コンソールに'ボタンがクリックされました'というメッセージが出力されます。

○onclickを使ったクリックイベントの検知

イベントリスナーを設定する別の方法として、HTML要素のonclick属性を使う方法もあります。

onclick属性に、クリック時に実行したいJavaScriptのコードを直接記述できます。

<button onclick="alert('ボタンがクリックされました')">クリック</button>

この例では、ボタンがクリックされると、alert関数が呼び出され、アラートボックスが表示されます。

ただし、onclick属性を使う方法は、HTMLとJavaScriptが混在してしまうため、コードの可読性や保守性が下がる可能性があります。

そのため、できるだけaddEventListenerを使ってイベントリスナーを設定することが推奨されています。

○サンプルコード1：ボタンクリック時にアラートを表示

それでは、ボタンクリック時にアラートを表示するサンプルコードを見てみましょう。

<button id="myButton">クリックしてね</button>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

まず、HTML側でid属性を使ってボタン要素にmyButtonという識別子を付けています。

JavaScript側では、getElementByIdメソッドを使ってidがmyButtonの要素を取得し、button変数に代入しています。

次に、button変数に対してaddEventListenerメソッドを使ってクリックイベントリスナーを設定しています。

クリックされた時に実行される関数内では、alert関数を呼び出してアラートボックスを表示しています。

このコードを実行すると、ボタンをクリックするたびに「ボタンがクリックされました！」というアラートが表示されます。

○サンプルコード2：リンククリック時にイベントを無効化

次は、リンクをクリックした時のデフォルトの動作を無効化する方法を見てみましょう。

リンクをクリックすると、通常は指定したURLにページ遷移しますが、それを防ぎたい場合があります。

<a href="https://www.example.com" id="myLink">リンク</a>
const link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('リンクはクリックされましたが、ページ遷移は無効化されました');
});

ここでは、a要素にmyLinkというidを付けています。

JavaScriptでは、getElementByIdメソッドでmyLink要素を取得し、addEventListenerでクリックイベントリスナーを設定しています。

クリックイベントリスナーの関数では、引数でeventオブジェクトを受け取っています。

このオブジェクトには、イベントに関する様々な情報や、イベントの動作を制御するためのメソッドが用意されています。

event.preventDefault()を呼び出すことで、リンクのデフォルトの動作（ページ遷移）をキャンセルしています。

よって、リンクをクリックしてもページ遷移は行われません。

代わりに、コンソールに'リンクはクリックされましたが、ページ遷移は無効化されました'というメッセージが出力されます。

●jQueryを使ったクリックイベントの取得

jQueryを使うと、クリックイベントの取得がとても簡単になります。

jQueryでは、セレクタを使って要素を選択し、その要素に対してメソッドを呼び出すことでイベント処理を行います。

○jQueryでクリックイベントを検知する方法

jQueryでクリックイベントを検知するには、clickメソッドを使います。

下記のように記述することで、特定の要素がクリックされた時に、指定した処理を実行できます。

$('#myButton').click(function() {
  console.log('ボタンがクリックされました');
});

ここでは、$('#myButton')という記述で、id属性がmyButtonの要素を選択しています。

clickメソッドを呼び出し、引数として関数を渡すことで、クリック時の処理を定義しています。

この例では、ボタンがクリックされると、コンソールに'ボタンがクリックされました'というメッセージが出力されます。

○サンプルコード3：jQueryでボタンクリック時に関数を実行

それでは、jQueryを使ってボタンクリック時に関数を実行するサンプルコードを見てみましょう。

<button id="myButton">クリックしてね</button>
function greet() {
  alert('こんにちは！');
}

$('#myButton').click(greet);

HTMLでは、id属性がmyButtonのボタン要素を定義しています。

JavaScriptでは、まずgreet関数を定義しています。

この関数は、アラートボックスに'こんにちは！'というメッセージを表示します。

次に、$('#myButton').click(greet);という記述で、idがmyButtonの要素がクリックされた時に、greet関数を実行するようにしています。

このコードを実行すると、ボタンをクリックするたびに'こんにちは！'というアラートが表示されます。

jQueryを使うことで、JavaScriptの記述量を減らしつつ、簡潔にイベント処理を行うことができました。

○サンプルコード4：jQueryでリンクのクリックイベントを制御

続いて、jQueryでリンクのクリックイベントを制御する方法を見ていきましょう。

<a href="https://www.example.com" id="myLink">リンク</a>
$('#myLink').click(function(event) {
  event.preventDefault();
  console.log('リンクはクリックされましたが、ページ遷移は無効化されました');
});

HTMLでは、id属性がmyLinkのa要素を定義しています。

jQueryのコードでは、$('#myLink')でidがmyLinkの要素を選択し、clickメソッドを使ってクリックイベントリスナーを設定しています。

クリックイベントリスナーの関数では、引数でeventオブジェクトを受け取っています。

event.preventDefault()を呼び出すことで、リンクのデフォルトの動作（ページ遷移）をキャンセルしています。

代わりに、コンソールに'リンクはクリックされましたが、ページ遷移は無効化されました'というメッセージが出力されます。

●複数のクリックイベントを扱う

Webページ上に、たくさんのボタンやリンクがある場合、1つ1つに個別にイベントを設定するのは大変ですよね。

そんな時は、複数の要素に同じイベントを一括で適用する方法が便利です。

○複数の要素に同じイベントを適用する方法

jQueryでは、セレクタを使って複数の要素を選択し、そのすべてに同じイベントを適用できます。

例えば、class属性がbtnのボタンがたくさんあるとします。

<button class="btn">ボタン1</button>
<button class="btn">ボタン2</button>
<button class="btn">ボタン3</button>

このすべてのボタンに、同じクリックイベントを設定するには、下記のようにします。

$('.btn').click(function() {
  console.log('ボタンがクリックされました');
});

ここでは、$('.btn')というセレクタを使って、classがbtnの要素をすべて選択しています。

そして、clickメソッドを使って、選択したすべての要素にクリックイベントを設定しています。

こうすることで、btnクラスを持つすべてのボタンに、同じクリックイベントが適用されます。

○サンプルコード5：複数のボタンに同じクリック処理を適用

それでは、実際のサンプルコードを見てみましょう。

<button class="btn">ボタン1</button>
<button class="btn">ボタン2</button>
<button class="btn">ボタン3</button>
$('.btn').click(function() {
  const buttonText = $(this).text();
  console.log(buttonText + 'がクリックされました');
});

HTMLでは、class属性がbtnの3つのボタンを定義しています。

JavaScriptでは、$('.btn')でbtnクラスを持つすべての要素を選択し、clickメソッドでクリックイベントを設定しています。

クリックイベントの処理では、$(this)を使って、クリックされた要素自体を参照しています。

text()メソッドを使って、クリックされたボタンのテキストを取得し、コンソールに出力しています。

このコードを実行すると、下記のような結果になります。

ボタン1がクリックされました
ボタン2がクリックされました
ボタン3がクリックされました

どのボタンをクリックしても、同じイベント処理が実行されていることがわかりますね。

○サンプルコード6：動的に追加した要素にもイベントを適用

ここまでは、最初からHTMLに存在する要素に対してイベントを設定する方法を見てきました。

でも、JavaScriptを使って動的に要素を追加する場合はどうすればいいのでしょうか？

実は、動的に追加した要素に対しても、同じようにjQueryでイベントを設定できるんです。

<div id="container"></div>
// 動的にボタンを追加する関数
function addButton() {
  const button = $('<button>').text('新しいボタン');
  $('#container').append(button);
}

// 動的に追加したボタンにもクリックイベントを設定
$('#container').on('click', 'button', function() {
  console.log('動的に追加されたボタンがクリックされました');
});

// ボタンを追加
addButton();
addButton();

ここでは、addButton関数を使って、動的にボタンを追加しています。

$('<button>')でボタン要素を作成し、appendメソッドを使って#container要素の中に追加しています。

重要なのは、$('#container').on('click', 'button', ...)の部分です。

onメソッドを使うことで、#container要素の中のbutton要素に対してイベントを設定しています。

これにより、動的に追加されたボタンにもクリックイベントが適用されます。

このコードを実行すると、下記のような結果になります。

動的に追加されたボタンがクリックされました
動的に追加されたボタンがクリックされました

addButton関数で追加したボタンをクリックすると、イベント処理が実行されていることがわかります。

このような形で、jQueryのonメソッドを使えば、動的に追加した要素にもイベントを設定できるんです。

複数の要素に同じイベントを適用したり、動的に追加した要素にイベントを設定したりする方法を理解することで、より柔軟なイベント処理が可能になります。

●よくあるエラーと対処法

初心者のうちは、エラーが出るとパニックになってしまうこともあるでしょう。

でも大丈夫。

よくあるエラーとその対処法を知っておけば、冷静に問題を解決できるようになります。

○onclickが動かない時の原因と対処法

JavaScriptでクリックイベントを設定する際、onclick属性を使うことがあります。

でも、思ったように動作しない時がありますよね。

よくある原因の1つは、JavaScriptのコードがHTMLの要素よりも先に読み込まれていることです。

<button id="myButton" onclick="handleClick()">クリック</button>

<script>
function handleClick() {
  console.log('ボタンがクリックされました');
}
</script>

この例では、onclick属性でhandleClick関数を呼び出そうとしていますが、JavaScriptのコードがボタン要素よりも後ろに書かれています。

この場合、ボタン要素が読み込まれた時点ではhandleClick関数がまだ定義されていないため、エラーが発生してしまいます。

対処法としては、JavaScriptのコードをHTMLの要素よりも先に読み込むか、addEventListenerを使ってイベントリスナーを設定するようにします。

<button id="myButton">クリック</button>

<script>
function handleClick() {
  console.log('ボタンがクリックされました');
}

document.getElementById('myButton').addEventListener('click', handleClick);
</script>

こうすることで、ボタン要素が読み込まれた後に、確実にイベントリスナーが設定されます。

○「Uncaught TypeError」エラーへの対処

jQueryを使ったイベント処理で、よく遭遇するエラーの1つが「Uncaught TypeError: Cannot read property ‘addEventListener’ of null」というエラーです。

このエラーは、存在しない要素に対してイベントリスナーを設定しようとした時に発生します。

<button id="myButton">クリック</button>
// ボタン要素を取得
const button = document.getElementById('myBtn');

// イベントリスナーを設定
button.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
});

この例では、id属性がmyBtnの要素を取得しようとしていますが、実際のボタン要素のidはmyButtonになっています。

そのため、button変数にはnullが代入され、nullに対してaddEventListenerメソッドを呼び出そうとしてエラーが発生します。

対処法は簡単です。

セレクタを正しく指定し、目的の要素を確実に取得するようにしましょう。

// ボタン要素を取得
const button = document.getElementById('myButton');

// イベントリスナーを設定
button.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
});

id属性をmyButtonに修正することで、正しくボタン要素を取得できます。

これで、エラーが解消されるはずです。

○イベントが重複して発生する問題の解決策

jQueryを使ったイベント処理で、もう1つよくある問題が、イベントが重複して発生してしまうことです。

例えば、ボタンのクリックイベントを設定する際、うっかり同じイベントリスナーを複数回設定してしまったとします。

$('#myButton').click(function() {
  console.log('ボタンがクリックされました');
});

$('#myButton').click(function() {
  console.log('ボタンがクリックされました');
});

この場合、ボタンをクリックすると、同じメッセージが2回出力されてしまいます。

これを防ぐには、offメソッドを使って既存のイベントリスナーを解除してから、新しいイベントリスナーを設定するようにします。

$('#myButton').off('click').click(function() {
  console.log('ボタンがクリックされました');
});

off('click')とすることで、clickイベントに関連付けられた既存のイベントリスナーをすべて解除します。

その後、新しいイベントリスナーを設定することで、重複を避けられます。

エラーは開発者にとって厄介な存在ですが、適切に対処することで、問題を解決し、安定したイベント処理を実現できます。

エラーメッセージをよく読んで、原因を特定し、適切な対処を行うことが大切です。

●クリックイベントの応用例

ここまで学んだことを活かせば、より実践的なクリックイベントの活用方法を実現できます。

Webアプリケーションに、よりインタラクティブな機能を追加することができるでしょう。

○サンプルコード7：クリックした要素の情報を取得

クリックイベントを使えば、ユーザーがクリックした要素の情報を取得することができます。

これは、動的にページを更新したり、クリックされた要素に応じて処理を切り替えたりする際に役立ちます。

<ul id="myList">
  <li>アイテム1</li>
  <li>アイテム2</li>
  <li>アイテム3</li>
</ul>
$('#myList li').click(function() {
  const clickedItem = $(this).text();
  console.log('クリックされた要素：' + clickedItem);
});

この例では、id属性がmyListのul要素内のli要素にクリックイベントを設定しています。

クリックイベントの処理では、$(this)を使ってクリックされたli要素自体を参照し、text()メソッドでその要素のテキストを取得しています。

取得したテキストは、clickedItem変数に代入され、コンソールに出力されます。

このコードを実行すると、下記のような結果になります。

クリックされた要素：アイテム1
クリックされた要素：アイテム2
クリックされた要素：アイテム3

リスト内の各アイテムをクリックすると、クリックされた要素のテキストがコンソールに表示されます。

このように、クリックイベントを使って、ユーザーがどの要素をクリックしたのかを特定し、それに応じた処理を行うことができます。

○サンプルコード8：ダブルクリックイベントの検知

クリックイベントは、シングルクリックだけでなく、ダブルクリックも検知できます。

jQueryでは、dblclickメソッドを使ってダブルクリックイベントを設定できます。

<button id="myButton">ダブルクリックしてね</button>
$('#myButton').dblclick(function() {
  console.log('ボタンがダブルクリックされました');
});

この例では、id属性がmyButtonのボタン要素に対して、ダブルクリックイベントを設定しています。

ボタンをダブルクリックすると、コンソールに'ボタンがダブルクリックされました'というメッセージが出力されます。

ダブルクリックイベントを使えば、より高度なユーザーインタラクションを実装できます。

例えば、ダブルクリックされた要素を編集モードにしたり、特別な機能を呼び出したりすることができます。

○サンプルコード9：右クリックイベントのカスタマイズ

通常、右クリックするとブラウザのデフォルトのコンテキストメニューが表示されます。

ただ、右クリックイベントを検知して、独自のメニューを表示するようにカスタマイズできます。

<div id="myElement">右クリックしてみてね</div>
$('#myElement').contextmenu(function(event) {
  event.preventDefault();
  console.log('右クリックされました');
  // ここで独自のコンテキストメニューを表示する処理を行う
});

この例では、id属性がmyElementのdiv要素に対して、右クリックイベントを設定しています。

右クリックイベントの処理では、まずevent.preventDefault()を呼び出して、デフォルトのコンテキストメニューの表示を抑制しています。

その後、コンソールに'右クリックされました'というメッセージを出力しています。

実際のアプリケーションでは、ここで独自のコンテキストメニューを表示する処理を行うことができます。

例えば、クリックされた位置に応じたメニューを動的に生成したり、特定の操作を実行したりすることができます。

○サンプルコード10：スマホのタップイベントを扱う

スマートフォンでは、クリックの代わりにタップという操作が使われます。

jQueryでは、touchstartやtouchendなどのイベントを使って、タップイベントを検知できます。

<button id="myButton">タップしてね</button>
$('#myButton').on('touchstart', function() {
  console.log('ボタンがタップされました');
});

この例では、id属性がmyButtonのボタン要素に対して、touchstartイベントを設定しています。

ボタンをタップすると、コンソールに'ボタンがタップされました'というメッセージが出力されます。

タップイベントを使えば、スマートフォン向けのWebアプリケーションで、ユーザーのタップ操作に応じた処理を行うことができます。

まとめ

今回は、JavaScriptのクリックイベントについて、基礎からしっかりと学ぶことができましたね。

クリックイベントの基本的な使い方から、jQueryを使った応用的なテクニック、そしてよくあるエラーへの対処法まで、実践的なサンプルコードを交えながら解説してきました。

クリックイベントを理解することは、Webアプリケーションに動きを持たせるために欠かせないスキルです。

ユーザーのクリック操作に合わせて、ページの更新や処理の実行など、インタラクティブな機能を実現できるようになります。

記事の中で紹介したサンプルコードを参考に、自分のプロジェクトでクリックイベントを活用してみてください。

JavaScript初心者の方も、この記事を読んで得た知識を活かせば、きっと素晴らしいWebアプリケーションを開発できるはずです。