Question

我有一个名为＆＃39; avatar＆＃39;的JS对象。使用create函数在HTML页面上生成一个按钮并设置一些属性。

我想在调用avatar对象中的函数的按钮上设置一个onmouseover，所以我写了：

this.create = function(){
    this.button = document.createElement("BUTTON");
    this.text = document.createTextNode(this.name);
    this.button.appendChild(this.text);
    document.body.appendChild(this.button);
    this.button.style.background=this.color;
    this.button.addEventListener("mouseover", this.randomMove());
}

但是，函数randomMove会立即执行，而不会等待按钮被鼠标移过。随后的鼠标移除无效。

Answer 1

你需要传递一个函数体，而不是函数返回的函数体。在您的情况下，代码评估this.randomMove()并将返回的结果分配给mouseover事件处理程序。这应该是它的样子：

this.button.addEventListener("mouseover", this.randomMove);

请参阅此简单示例，以便轻松了解正在发生的事情：http://jsfiddle.net/f8tm4jq3/

Answer 2

Andy提到，你需要传递函数 reference （不带括号），而不是函数 expression （带括号）作为addEventListener的参数。

Answer 3

感谢您的帮助。

事实证明我真正想要的是绑定。

this.button.addEventListener("mouseover",this.randomMove.bind(this));

这将函数调用绑定到属于此对象的方法。因此，即使生成的HTML超出了对象实例的范围，函数调用也会记住它应该调用哪个实例。

再次感谢

本

Javascript对象。如何创建一个调用同一对象内的函数的按钮

3 个答案: