javascriptのonclickとaddEventlistnerの違い

まずonclickとaddEventlistnerを書いてみる！！

(js)のonclick

<p id ="click">btn</p>


<script>
document.getElementById("click").onclick=function(){
    console.log("clicked");
}

</script>

これでconsole.log();でうまく表示させることができました。

しかし、下記のように書いてみると,,,,,,,,

<p id ="click">btn</p>


<script>
document.getElementById("click").onclick=function(){
    console.log("clicked");
}

document.getElementById("click").onclick=function(){
    console.log("two-clicked");
}

</script>

だと、
console.log("clicked");の方は表示されなくて下記の方のconsole.log("two-clicked");の方は表示されました。
つまりどういうことかと言いますと、『上書きされた』と言うことになります。

では、次にaddEventlistnerの方を見ていきましょう！！

変数名.addEventListener("click",function(){};

<p id ="click">btn</p>

<script>
let on = document.getElementById("click");
on.addEventListener("click",function(){
    console.log("cliked");
})

</script>

このように書くと、console.log("cliked");が表示されるようになります。

これも次のように書いていくと、、、

<p id ="click">btn</p>

<script>
let on = document.getElementById("click");
on.addEventListener("click",function(){
    console.log("cliked");
})

on.addEventListener("click",function(){
    console.log("two-clicked");
})


</script>

このように書くと、 console.log("cliked");　と　console.log("two-clicked");の両方が、
表示されるようになります。

まとめ

onclickは上書きされる

変数名.addEventListener("click",function(){};　は、上書きされずに反映される。

なので、onclickとaddEventlistnerの使い分けは状況によって使い分けた方が良さそうですね！！！