javascript - 无法在 Javascript 中设置新的 IMG 事件属性

Question

这个问题已经有答案了:

How to create onclick event for input tag (1 个回答)

已关闭 1 年前。

我是 JavaScript 新手，但有一些 Java/C++ 经验。因此，我尝试使用以下代码在我正在创建的新 IMG 元素上设置一些简单的事件属性:

var square = document.createElement("IMG");
square.src = "Square_Empty.png";
square.alt = "Oops!";
square.style = "height:100px;width:100px;position:\
absolute;top:14.5px;left:83.1px;";
square.onmouseover = "this.src='Square_Red.png'";
square.onmouseout = "this.src='Square_Empty.png'";
document.body.appendChild(square);

一切似乎都工作正常，除了 onmouseover 的分配和onmouseout属性。根据调试器(Firefox)，这些属性没有被分配，但其他属性被分配，我不明白为什么。

Answer 1

最好使用addEventListener():

square.addEventListener("mouseover", function(){ this.src='Square_Red.png' });
square.addEventListener("mouseout", function(){ this.src='Square_Empty.png' });

或者您可以简单地添加匿名函数function():

square.onmouseover = function(){ this.src='Square_Red.png'; }
square.onmouseout = function(){ this.src='Square_Empty.png'; }

希望这有帮助。