我應該使用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(); 
    }); 
);