![見出し画像](https://assets.st-note.com/production/uploads/images/97079652/rectangle_large_type_2_64ab62266bd93f6de44d740e1d6df52f.png?width=800)
【JavaScript】addEventListenerを使ったイベント処理の方法
addEventListenerを使ったイベント処理の方法
onload は複数同時に処理を記述できないという弱点があります。
そんな時に、まったく同じ処理をaddEventListener で処理を置き換えることができます。
addEventListener は第1引数にイベント名(load)を記述し、第2引数に実行する関数処理を記述します。
これでonload ベントと同じ処理を実現できますが、この場合は複数の処理をそのまま実行することができます。
サンプルプログラム
<html>
<body>
<body>
<script>
window.addEventListener('load', function() {
console.log("HelloWorld1");
});
window.addEventListener('load', function() {
console.log("HelloWorld2");
});
window.addEventListener('load', function() {
console.log("HelloWorld3");
})
</script>
</body>
</body>
</html>
実行結果
![](https://assets.st-note.com/img/1675338939989-doiJmGEnLT.png)
HelloWorld1
HelloWorld2
HelloWorld3
addEventListener は上書きされないので、同時に複数の処理を記述できます。
プログラムダウンロード
もっとJavaScriptを学びたい人は!こちらの本がおすすめです
#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者
この記事が気に入ったらサポートをしてみませんか?