javascript - 传递了 AddEventListener 中的函数

Question

当我在 addEventListener() 方法中传递我的函数时，它无法正常工作。事件未注册，我的函数未调用。

code

 <div id="box-wrap">
        <ul id="colorize">
        </ul>
</div>

JavaScript

function colorize(){
var ul = document.getElementById('colorize');

for(var i = 0; i < 36; i++){
    ul.appendChild(document.createElement('li'));
}

function randomColor(li){
    li.style.background= "#"+(Math.random()*0xFFFFFF<<0).toString(16);


}
var liElements = ul.children;
for (i = 0; i < liElements.length; i++){
 liElements[i].addEventListener('mouseover',randomColor(liElements[i]),false);
    }

}

怎么了？

Answer 1

addEventListener 的第二个参数必须是一个函数，你给它 undefined(randomColor(..) 的输出)/p>

这样调用它:

liElements[i].addEventListener('mouseover', function () {
    randomColor(liElements[i]);
} ,false);

现在你会遇到一个闭包问题(i 有错误的值)，像这样修复:

(function (bound_i) {
    liElements[bound_i].addEventListener('mouseover', function () {
        randomColor(liElements[bound_i]);
    } ,false);
} (i)); // <-- immediate invocation (IIFE)