Question

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

 <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(..)的输出

这样称呼：

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)

Answer 2

尝试代替

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

使用bind（这只适用于现代浏览器），但该链接有一个后备实现）

liElements[i].addEventListener('mouseover',randomColor.bind(this, liElements[i]),false);

在AddEventListener中传递了该函数

2 个答案: