javascript - 在 AddEventListener 中传递函数

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

使用绑定（请注意，这仅适用于现代浏览器），但该链接有一个后备实现）

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