見出し画像

【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>

実行結果


HelloWorld1
HelloWorld2
HelloWorld3

addEventListener は上書きされないので、同時に複数の処理を記述できます。

プログラムダウンロード


もっとJavaScriptを学びたい人は！こちらの本がおすすめです

#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者

この記事が気に入ったらサポートをしてみませんか？