Javascript addEventListener関数は、イベントがトリガーされずに呼び出されます

Question

私は明らかに何かを見落としているかもしれませんが、これは正しく行かないようです。

私はaddEventListenerメソッドがファンクションをトリガし、その間にパラメータを渡すので、1つのループですべて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を呼び出しています。

その時に呼び出されます。したがって、バックグラウンドは、指定された色でセットアップを取得します。

あなたはこのように書くことができます第二for loop

に追加されていないため、addEventListenerのその。

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

あなたは1

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

にループのための2つを短縮することができます注：

addEventListenercallbackなく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"; 
}