LoginSignup
70
61

More than 3 years have passed since last update.

【js】onclickとaddEventListenerの違い

Posted at

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

追加でイベントが

  • 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使った方がイベント上書きしないし、安心だなと思った。

70
61
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
70
61