我应该使用addEventListener

Question

Should I use addEventListener in these type cases?

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

or

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

and why?

Answer 1

The onchange attribute requires the fun function to be in global scope. In a larger application you want to avoid this, as there might be other functions with the same name from your application or from external libraries. Or imagine building a component that is used several times on the page.

addEventListener can be wrapped in a closure like this and be used inside an isolated component:

(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();
    });
);