追加でイベントを追加出来るか・出来ないかの違い
追加でイベントが
- 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("ほげほげ２");
});
//=>ほげほげ1
//=>ほげほげ2
</script>
「ほげほげ1」が「ほげほげ2」両方表示されました！
個人的には、onclick属性でonclick="hoge1();hoge2()"すれば複数できるし、1つのfunctionの中に関数を追加すればいいのでは？と疑問に思ったけど、確かにaddEventListener使った方がイベント上書きしないし、安心だなと思った。