JavaScriptでクリック時に処理を発動させる方法

この記事では、JavaScriptのaddEventListener()でクリックイベントが発生した際に処理を発動させる方法について見ていきたいと思います。

addEventListener()とは

addEventListener()は、指定したイベントが発生した際に処理を発動させることのできるメソッドです。

addEventListener()の書き方

対象.addEventListener(イベント名, 発動させたい処理)

※「対象」には表示されたページを表す「document」やHTML要素などを指定します。
※「発動させたい処理」には関数を指定します。

addEventListener()の使用例

クリック時に処理を発動させる方法

表示されたページをクリックした際に処理を発動させる

・HTML

<p id="hello"></p>

・JavaScript

let hello = document.getElementById("hello");

document.addEventListener("click", () => {
  hello.textContent = "こんにちは！";
});

この例では、表示されたページ「document」をクリックすると「こんにちは！」と表示されます。

なお、ここで用いているgetElementById()については以下のページでご参照していただくことができます。
JavaScriptのgetElementById()の使い方

では結果を見てみましょう。

「Result」タブを選択して、そのページをクリックすると「こんにちは！」と表示されますね。

では次にボタンをクリックした際に処理を発動させる例を見てみましょう。

ボタンをクリックした際に処理を発動させる

・HTML

<input type="button" id="button" value="ボタン">
<p id="hello"></p>

・JavaScript

let button = document.getElementById("button");
let hello = document.getElementById("hello");

button.addEventListener("click", () => {
  hello.textContent = "こんばんは！";
});

この例では、ボタン「button」をクリックすると「こんばんは！」と表示されるようになっています。

では結果を見てみましょう。

「Result」タブを選択して、「ボタン」をクリックすると「こんばんは！」と表示されますね。

まとめ

このように、addEventListener()を用いることでイベントが発生した際に指定した処理を発動させることができます。