鍍金池/ 問(wèn)答/HTML/ 為什么addEventListener沒(méi)有點(diǎn)擊卻自己執(zhí)行了?

為什么addEventListener沒(méi)有點(diǎn)擊卻自己執(zhí)行了?

我用addEventListener給所有<a>tag加上click屬性和一個(gè)function做handler，但是為什么測(cè)試的時(shí)候我并沒(méi)有click，handler就已經(jīng)自己觸發(fā)？

var els = document.getElementsByTagName("a");

for(var i = 0; i< els.length;i++){
  console.log(els[i].innerHTML);
  els[i].addEventListener("click",myFunction(els.innerHTML));
}

function myFunction(x){
  console.log(x);
  document.getElementById('demo').innerHTML=x;//我還沒(méi)有click就已經(jīng)運(yùn)行這一行了
}
回答
編輯回答
過(guò)客

addEventListener第二個(gè)參數(shù)接收的是個(gè)Function，在觸發(fā)時(shí)執(zhí)行的。你一定要把某個(gè)參數(shù)傳到這個(gè)function里的話，用閉包返回一個(gè)Function

el.addEventListener("click", myFn(args));
function myFn(args){
    return function(e){
        console.log(args);
    }
}
2018年3月2日 05:20
編輯回答
愿如初

綁定的時(shí)候myFunction(els.innerHTML)就已經(jīng)自己執(zhí)行了，如以下代碼改進(jìn)：

var els = document.getElementsByTagName("a");

for(var i = 0; i< els.length;i++){
  console.log(els[i].innerHTML);
  els[i].addEventListener("click",myFunction);
}

function myFunction(e){
  document.getElementById('demo').innerHTML=e.target.innerHtml;
}
2017年6月18日 08:20