【JavaScript】onclickとaddEventListenerの違い【どっちを使う】

JavaScriptでクリックイベントを書くには、onclickとaddEventListenerの書き方があります。

それぞれの書き方の違いがよくわからなかったり、どちらを使ったらいいか迷ったことはありませんか？

私も迷ったことがありますので、その際に調べたことや書いたコードを記事にしました。

この記事では、onclickとaddEventListenerの違いや、どちらの書き方を使ったほうがいいかについて解説します。

ゴロー

それでは始めます

onclickの基本的な書き方

まずonclickの基本的な書き方について解説します。

onclickには以下の書き方があります。

HTMLタグのonclick属性に関数を設定する書き方（推奨されない書き方）

HTMLタグのonclick属性に関数を設定する書き方について解説します。

はじめに書いておくと、onclick属性に関数を設定する書き方は非推奨の書き方です。

2024.11.6追記：非推奨という書き方は語弊があったかもしれないので、追記します。
onclick属性は、<frame>などの非推奨の古い HTML 要素とは違います。
ただ、onclick属性に関数を設定する書き方は、推奨されない書き方ですので、使わないほうがいいかと思います。

以下はMDNの引用です。

 HTML の onevent 属性を使ってイベントハンドラーを設定する方法がありますが、お勧めしません。

イベントの扱い (概要) – イベントリファレンス – MDN Web Docs

サンプルコード

サンプルコードを見ながら解説します。

まずはHTMLです。

<input type="button" value="BUTTON" onclick="handleClick()">

次にJavaScriptです。

function handleClick() {
    console.log("ボタンが押されました");
}

HTML部分を解説します。

以下はinputタグです。最後の方にonclickとありますね。

このonclick属性には、後ほど解説するJavaScript部分に書いている関数を設定します。

<input type=”button” value=”BUTTON” onclick=”handleClick()”>

次にJavaScript部分を解説します。

onclick属性に設定されているものと同じhandleClick()の関数が宣言されていますね。

function handleClick() {
console.log(“ボタンが押されました”);
}

どういう動きか

どういった動きになるかというとinputボタンを押すと、ブラウザのコンソール部分にボタンが押されましたと表示されます。

HTMLタグのonclick属性に関数を設定する書き方は推奨されない書き方です

重ねてにはなりますが、上記の書き方は推奨されない書き方になりますので、特別に使いたい理由がなければ使わないほうがいいですね。

以下はMDNの引用です。

 HTML の onevent 属性を使ってイベントハンドラーを設定する方法がありますが、お勧めしません。

イベントの扱い (概要) – イベントリファレンス – MDN Web Docs

onclickプロパティに関数を設定する書き方

次にonclickプロパティに関数を設定する書き方について解説します。

サンプルコード

サンプルコードを見ながら解説します。

まずはHTMLです。

<input type="button" id="btn" value="BUTTON">

次にJavaScriptです。

window.onload = function () {
    const btn = document.getElementById("btn");
    function handleClick() {
       console.log("ボタンが押されました");
    }
    btn.onclick = handleClick;
}

HTML部分を解説します。

以下はinputタグです。今回はid属性が設定されていますね。

<input type=”button” id=”btn” value=”BUTTON”>

次にJavaScript部分を解説します。

window.onload については、今回の記事のテーマから離れているので、割愛します。

注目してもらいたいのは以下の部分です。

const btn = document.getElementById(“btn”);
function handleClick() {
console.log(“ボタンが押されました”);
}
btn.onclick = handleClick;

一行ずつ解説します。

const btn = document.getElementById(“btn”);

上記はinputのidがbtnの要素を取得します。

function handleClick() {
console.log(“ボタンが押されました”);
}

上記はhandleClick関数を宣言しています。

onclickプロパティ

btn.onclick = handleClick;

上記は今回のテーマであるonclickプロパティです。

btnで取得したinputボタンにonclickプロパティを設定して、handleClick関数を代入しています。

つまり、inputボタンを押すと、handleClick関数が実行されるということです。

どういう動きか

動きはさきほどと同じで、inputボタンを押すと、ブラウザのコンソール部分にボタンが押されましたと表示されます。

addEventListenerの基本的な書き方

addEventListenerの基本的な書き方について解説します。

addEventListenerは、JavaScriptでイベントを設定する方法です。

前述のonclickもイベントを設定する方法ですが、onclickは要素をクリックしたときにイベントを設定する方法です。

addEventListenerには、clickの他にmouseover（要素にマウスオーバーしたとき）など、様々なイベントの種類があります。

addEventListenerの基本的な構文

addEventListenerの基本的な構文について解説します。

addEventListener(type, listener, options)

では上記の構文を解説します。

type部分

type部分には、loadやclickなどのイベントの種類が入ります。後ほどサンプルコードで解説します。

listener部分

listener部分には、指定したイベントが発生したときに呼び出したい関数を設定します。

例えば、要素をclickしたときにコンソールにボタンが押されましたと表示したい場合は、listener部分にconsole.log()を設定します。

options部分

options部分は省略可能です。

options部分について知りたい方は↓

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

サンプルコード

では例によって、サンプルコードを見ながら解説します。

まずはHTMLです。

<input type="button" id="btn" value="BUTTON">

次にJavaScriptです。

window.addEventListener('load', function() {
    const btn = document.getElementById("btn");
    function handleClick() {
        console.log("ボタンが押されました");
    }
    btn.addEventListener('click', handleClick);
});

HTML部分を解説します。

以下はinputタグです。今回もid属性が設定されていますね。

<input type=”button” id=”btn” value=”BUTTON”>

次にJavaScript部分を解説します。

先ほど解説したonclickプロパティに関数を設定する書き方とよく似ていますので、比較して解説します。

window.onload = function () {
    const btn = document.getElementById("btn");
    function handleClick() {
       console.log("ボタンが押されました");
    }
    btn.onclick = handleClick;
}

次にaddEventListenerの書き方です。

window.addEventListener('load', function() {
    const btn = document.getElementById("btn");
    function handleClick() {
        console.log("ボタンが押されました");
    }
    btn.addEventListener('click', handleClick);
});

まず、1行目のwindowの後が違いますね。onloadプロパティが指定してあるのに対し、addEventListener(‘load’, function() {}が設定されています。

次に本題の部分です。

下から2行目のbtn.onclickがbtn.addEventListener(‘click’, handleClick);となっています。

idがbtnの要素がクリックされたとき、handleClick関数が呼び出されます。

handleClick関数は3行目から6行目部分です。

どういう動きか

動きは、さきほどと同じで、inputボタンを押すと、ブラウザのコンソール部分にボタンが押されましたと表示されます。

onclickとaddEventListenerの違い

次に、onclickとaddEventListenerの違いについて解説します。

前述しましたが、onclick属性に関数を設定する書き方は推奨されない書き方です。

ですので、上記の書き方は使わないほうがいいかと思います。

onclick属性について戻って読み返したい方はこちら

皆さん、onclickプロパティとaddEventListenerはどちらを使用したらいいか疑問になりませんか？

上記をonclickプロパティとaddEventListenerの違いと合わせて解説します。

結論

onclickプロパティとaddEventListenerのどちらを使用したらいいかというと、addEventListenerを使用した方がいいです。

理由

なぜ、addEventListenerを使用した方がいいかというと、addEventListenerは、1 つのイベントに複数のイベントリスナーを追加することができるからです。

onclickプロパティでは、複数のイベントリスナーを追加すると先に設定した関数が上書きされてしまいます。

イベントとは

イベントというのは、addEventListenerのclickやloadの部分です。

例えば、下記の太字の部分です。

btn.addEventListener(‘click‘, handleClick);

イベントリスナーとは

イベントリスナーというのは、例えば、クリックしたときに動かしたい関数のことです。

例えば、下記の太字の部分です。

function handleClick() {
console.log(“ボタンが押されました”);
}

btn.addEventListener(‘click’, handleClick);

サンプルコード

では例によって、サンプルコードを見ながら解説します。

addEventListenerのコードを解説します。

まずはHTMLです。

<input type="button" id="btn" value="BUTTON">

次にJavaScriptです。今までと特に変わりありません。

window.addEventListener('load', function () {
    const btn = document.getElementById("btn");
    function handleClick() {
        console.log("ボタンが押されました");
    }
    function handleClick2() {
        console.log("ボタンが押されました(2回目)");
    }
    btn.addEventListener("click", handleClick);
    btn.addEventListener("click", handleClick2);
});

HTML部分を解説します。

今までと特に変わりありませんので割愛します。

<input type=”button” id=”btn” value=”BUTTON”>

次にJavaScript部分を解説します。

3行目以降の関数定義部分に注目してください。

function handleClick() {
console.log(“ボタンが押されました”);
}
function handleClick2() {
console.log(“ボタンが押されました(2回目)”);
}

1つだった定義している関数が2つになっていますね。

このコードを実際に動かしてみると、コンソール部分に、ボタンが押されましたとボタンが押されました(2回目)が表示されます。

このように、1つのイベントに複数のイベントリスナーを追加することができます。

それに対して、onclickプロパティ

onclickプロパティでは、複数のイベントリスナーを追加すると先に設定した関数が上書きされてしまいます。　
と前述しました。

サンプルコード

onclickプロパティのJavaScriptのコードです。

window.onload = function () {
    const btn = document.getElementById("btn");
    function handleClick() {
        console.log("ボタンが押されました");
    }
    function handleClick2() {
        console.log("ボタンが押されました(2回目)");
    }
    btn.onclick = handleClick;
    btn.onclick = handleClick2;
}

こちらも関数が2つになっていますが、実際にブラウザで見てみると、ボタンが押されました(2回目)としか表示されません。

関数が上書きされてしまいました。

上記のように、addEventListenerは、複数のイベントリスナーが設定できますので、addEventListenerの方を使用するのをおすすめします。

まとめ

今回の記事をまとめます。

今回は、onclickとaddEventListenerの違いについて解説しました。

皆さんも良いコーディングライフを^^ ノシ