Help us understand the problem. What is going on with this article?

【js】onclickとaddEventListenerの違い

追加でイベントを追加出来るか・出来ないかの違い

追加でイベントが

  • onclick属性 → 出来ない✖️
  • onclickプロパティ → 出来ない✖️
  • addEventListener → 出来る◯

console.log「ほげほげ1」の後に「ほげほげ2」を追加してみた。

onclick属性

HTMLのタグにonclickを設定する方法
<input type="button" onclick="hoge()">

onclick属性
<input type="button" value="ぼたん" onclick="hoge()">

<script>
function hoge() {
  console.log("ほげほげ1");
}
function hoge() {
  console.log("ほげほげ2");
}
//=>ほげほげ2
</script>

「ほげほげ1」が「ほげほげ2」に上書きされてしまって表示されませんでした。

onclickプロパティ

jsにonclickを書く
myfunc.onclick = function() {

onclickプロパティ
<input type="button" id="myfunc" value="ぼたん">

<script>
const myfunc = document.getElementById("myfunc");
myfunc.onclick = function() {
  console.log("ほげほげ1");
}
myfunc.onclick = function() {
  console.log("ほげほげ2");
}
//=>ほげほげ2
</script>

「ほげほげ1」が「ほげほげ2」に上書きされてしまって表示されませんでした。

addEventListener

jsにaddEventListenerを書く
myfunc.addEventListener("click", function() {

addEventListener
<input type="button" id="myfunc" value="ぼたん">

<script>
const myfunc = document.getElementById("myfunc");
myfunc.addEventListener("click", function() {
  console.log("ほげほげ1");
});
myfunc.addEventListener("click", function() {
  console.log("ほげほげ2");
});
//=>ほげほげ1
//=>ほげほげ2
</script>

「ほげほげ1」が「ほげほげ2」両方表示されました!

個人的には、onclick属性でonclick="hoge1();hoge2()"すれば複数できるし、1つのfunctionの中に関数を追加すればいいのでは?と疑問に思ったけど、確かにaddEventListener使った方がイベント上書きしないし、安心だなと思った。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away