【js】onclickとaddEventListenerの違い
5951 ワード
追加でイベントを追加出来るか・出来ないかの違い
追加でイベントが
- 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使った方がイベント上書きしないし、安心だなと思った。
Author And Source
この問題について(【js】onclickとaddEventListenerの違い), 我々は、より多くの情報をここで見つけました https://qiita.com/KKKarin/items/ccb8ed361ab9acd1f9cf著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .