###まず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の使い分けは状況によって使い分けた方が良さそうですね！！！