Javascript addEventListener函數被調用而沒有觸發事件

Question

我可能忽略了一些顯而易見的東西，但這似乎並不正確。

我有這樣的少的代碼塊，其中addEventListener方法應觸發功能，同時傳遞參數通過這樣就可以與不同的功能工作，同時與一個循環創建所有EventListeners。 它確實有效，但是當站點加載完成後，函數會立即被調用。

爲什麼函數沒有等到它被觸發，而是立即運行？

var html = document.getElementsByTagName('html'); 
var pics = document.getElementsByClassName('pics'); 
var functions = []; 

for(h=0;h<pics.length;h++){ 
    array[h] = show(h); 
} 

for(p=0;p<pics.length;p++){ 
    pics[p].addEventListener('click',array[p]); 
} 

function show(index){ 
    html[0].style.backgroundColor = "black"; 
} 

Answer 1

在腳本

for (h = 0; h < pics.length; h++) { 
    array[h] = show(h); 
    } 

您正在使用的H值爲調用函數show。

它在那個時候被調用。所以，背景用給定的顏色獲得設置。

其不會因爲addEventListener要添加在第二for loop

可以這樣寫。

for (h = 0; h < pics.length; h++) { 
    array[h] = show; // don't call,store the function reference 
    } 

    for (p = 0; p < pics.length; p++) { 
    pics[p].addEventListener('click', array[p].bind(this,p)); 
    } 

可以縮短兩個用於循環到一個

for (p = 0; p < pics.length; p++) { 
    pics[p].addEventListener('click', show.bind(this,p)); 
    } 

注：

addEventListener期待callback，而不是一個function call。

Answer 2

array[h] = show(h);在頁面加載時被調用。這是工作代碼。

var html = document.getElementsByTagName('html'); 
var pics = document.getElementsByClassName('pics'); 
var functions = []; 
var array = []; 

for(h=0;h<pics.length;h++){ 
    array[h] = function() { show(h) }; 
} 

for(p=0;p<pics.length;p++){ 
    pics[p].addEventListener('click',array[p]); 
} 

function show(index){ 
    html[0].style.backgroundColor = "black"; 
}