addEventListener處理函數添加參數

事情的起因是因爲被一個學生問到的，代碼如下

var aDiv=oDiv.getElementsByTagName("div");

for(var i=0;i<aDiv.length;i++){

aDiv[i].addEventListener("mouseover",change(),false);

}

問我爲什麼mouseover事件都沒有觸發，爲什麼直接執行了函數。我當時也蒙了一下，但是後來突然發現，addEventListener中的處理函數只需要放一個函數名就行了，這樣寫就以爲這執行這個函數，因此，改寫代碼：

function change(obj){

obj.style.transform="scale(0)";

}

var aDiv=oDiv.getElementsByTagName("div");

for(var i=0;i<aDiv.length;i++){

aDiv[i].addEventListener("mouseover",change,false);

}

但是現在問題又來了，我們需要一個參數，而一個函數名是沒辦法穿參數的，所以這個時候就要用到bind方法

在EcmaScript5中擴展了叫bind的方法（IE6,7,8不支持），可以綁定參數。bind可接受的參數都分爲兩部分，且第一個參數都是作爲執行時函數上下文中的this的對象。

再次改寫：

var aDiv=oDiv.getElementsByTagName("div");

for(var i=0;i<aDiv.length;i++){

aDiv[i].addEventListener("mouseover",change.bind(aDiv[i],aDiv[i]),false);

}

function change(obj){

obj.style.transform="scale(0)";

}

————————————————

版權聲明：本文爲CSDN博主「源辰_付」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/u011724770/article/details/52210930