addEventListenerの使い方を徹底解説！【JavaScript初心者向け】

2025年9月6日2025年9月20日

初心者きつね

最近jsを学習し始めたんだけど、addEventListenerってどうやって使うの？

今回は、js初心者向けに、addEventListenerの使い方を徹底解説していきます。

addEventListenerの記述はかなりよく出てくるので、これを機にしっかりと学習していきましょう。

addEventListenerとは？

addEventListenerとは、主にJavaScriptでイベントを追加したい時に使用する関数です。

・ボタンがクリックされたら、divタグにあるclass名を追加する

・画面が一定量スクロールされたら、モーダルを利用して広告を表示する

・サイトを開いた際にローディング画面を表示し、内容が全て読み込まれたら終了する

このような処理は、全てaddEventListenerを利用して実装することができます。

addEventListenerの具体的な使い方

addEventListenerは関数であり、第1引数と第2引数を取るので

addEventListener(a, b); という書き方をします。

第1引数のaには、イベント名が入り

第2引数のbには、関数（function）が入ります。

例えば、要素をクリックした際の処理を書く場合は、addEventListener( “click”, function() {}; ); 、

画面がロードされた際の処理を書く場合は、addEventListener( “load”, function() {}; );

という風に書きます。

第2引数の関数には、第1引数で指定したイベントが発生した際にどのような処理を実行したいか、を書いていきます。

よく使う例としては

・consoleを表示するconsole.log();

・テキストを取得したり、変更したりできるtextContent

・element.style.backgroundColor = ‘blue’; など、CSSの変更

などですね。

実際にaddEventListenerを記述してみよう！

では、「”button”というid名が付いたボタン（buttonタグ）をクリックしたら、”show”というclassが付与される」という処理を、addEventListenerを実際に記述してみましょう！

一緒にやってみたい人は、VSCodeなどのエディタを開いてやってみてくださいね。

もし、VSCodeの使い方がわからない人は、下の記事を参考にしてください。

HTMLはこちら（一緒にやる場合は、下のコードをコピペしてindex.htmlなどのhtmlファイルに貼り付けてください）。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クラス名付与練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="button">ここをクリックしてください</button>

    <script scr="script.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クラス名付与練習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="button">ここをクリックしてください</button>

    <script scr="script.js"></script>
</body>
</html>

CSSはこちら（htmlと同様に、一緒にやる場合はcssファイルにコピペしてください）。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.button {
    padding: 5px;
    margin: 10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.button {
    padding: 5px;
    margin: 10px;
}

HTMLとCSSの準備ができたところで、さっそくaddEventListenerの実装をしていきましょう。

まずは、addEventListenerにイベントを指定していきます。

と言いたいところですが、今回はid=”button”が付いているボタンの要素を取得してくる必要がありますので

最初に、以下のような記述をします。

const button = querySelector("#button");

const button = querySelector("#button");

constというのは、定数（再代入できない値）を指定する際に利用されますが

buttonという定数を作り、”button”というidを取得しています。

これで、ボタンの要素が取得できましたので、今度こそaddEventListenerにイベントを指定していきます。

addEventListener関数は、第1引数と第2引数を取り、イベントは第1引数に取るんでしたね。

今回は、「ボタンを『クリックしたら』class名を付与」したいので、クリックイベントを利用します。

ただ、addEventListenerはオブジェクトと繋げて書き、今回は最初に指定したbutton要素に繋げて書けばいいので

button.addEventListener("click", function() {});

button.addEventListener("click", function() {});

という風に記述をしていきます。

第2引数の関数についてですが、こちらには

「”show”というclassが付与される」

という関数を指定していきます。

classを付与するには

classList.add('付与したいclass名');

classList.add('付与したいclass名');

を利用します。

ということで、第2引数の関数の波括弧{}の中に記述しましょう。

そのまま代入してもいいのですが、視認性を良くするために、まずは関数内の{}の中で2回エンターキーを押して改行してください。

button.addEventListener("click", function() {

});

button.addEventListener("click", function() {

});

そして、下のように記述していきましょう。

今回は、”show”というclass名を当てたいので、中身にshowを加えるのも忘れずに。

button.addEventListener("click", function() {
  classList.add('show'); 
});

button.addEventListener("click", function() {
  classList.add('show'); 
});

しかし、実はこれでは不十分です。

なぜなら、どの要素に当てるかの記述がされていないから。

ということで、最初に取得した要素の記述を先頭に持ってきて

関数内にもbutton要素を書き加えてあげます。

const button = querySelector("#button");
button.addEventListener("click", function() {
  button.classList.add('show'); 
});

const button = querySelector("#button");
button.addEventListener("click", function() {
  button.classList.add('show'); 
});

これで完成です。

ローカル環境などで確認してみて、ボタンをクリックする前はbuttonのidしか付いていないbuttonタグに、showというclass名が付与されていれば成功です。

（htmlファイルにjsファイルの読み込みの記述を忘れないようにしてくださいね！）

こんな感じ。

ボタンを押す前。

ボタンを押した後。

もし、ボタンをクリックする度にshowのクラス名を付けたり外したりしたい場合は、addの代わりにtoggleを利用してください。

const button = querySelector("#button");
button.addEventListener("click", function() {
  button.classList.toggle('show'); //classList.addの代わりにclassList.toggleを利用する
});

const button = querySelector("#button");
button.addEventListener("click", function() {
  button.classList.toggle('show'); //classList.addの代わりにclassList.toggleを利用する
});