javascript - addEventListener を使用する必要がありますか

Question

addEventListenerこれらのタイプの場合に使用する必要がありますか?

<input id="input" type="file" onchange="fun()>

また

document.getElementById("input").addEventListener("change", function() {
  fun();
});

なぜ？

Answer 1

このonchange属性では、fun関数がグローバル スコープ内にある必要があります。大規模なアプリケーションでは、アプリケーションまたは外部ライブラリから同じ名前の他の関数が存在する可能性があるため、これを回避する必要があります。または、ページで何度も使用されるコンポーネントを構築することを想像してください。

addEventListenerこのようなクロージャーでラップして、分離されたコンポーネント内で使用できます。

(function(){})(
    function fun(){
         // Now other components can also have a `fun` function, without causing confusion.
         // `fun` is only defined inside the IIFE (the (function(){})() wrapper around the module).
    }
    document.getElementById("input").addEventListener("change", function() {
      fun();
    });
);