JS创建对象，添加了onclick函数。功能在创建时随意触发

Posted 2021-04-20

我有以下代码：

document.body.onload = addElement;

function addElement () {    var myImage = new Image(400, 100); 
myImage.src = 'https://www.google.com/logos/doodles/2017/holidays-2017-day-2-5240850203279360-s.png'; 
myImage.id = "myImageId";   
myImage.onclick = myVerySpecialFunction(); 
document.body.appendChild(myImage);   
var tmp = "myVerySpecialFunctionAnswer()";   
document.getElementById("myImageId").setAttribute("onclick", tmp); } 

function myVerySpecialFunction() {  alert("Knock-knock!"); } 
function myVerySpecialFunctionAnswer() { alert("Who is there!?"); }

当我添加到myImage.onclick函数时，它立即触发。为什么这样做？我能预防吗？ 当然，我可以在这里用setAttribute做一个解决方法，但我不喜欢它。 https://jsfiddle.net/kv8w78be/3/

答案

正如Mark和Andy在评论中对你的问题所说，这是由于你试图将你的函数分配给onClick事件。

在javascript中，调用函数和将函数赋值给属性之间存在差异。例如，

let myImage = new Image(400, 100);
function foo() { console.log(Hello, world!); }

myImage.onclick = foo(); // As foo() does not return any value, myImage.onclick is set to undefined.
myImage.onclick = foo; // myImage.onclick is set as a reference to function foo().

当您将foo()分配给onClick事件时，您实际上所说的是“分配函数foo()返回到myImage.onclick的值。因此，立即调用该函数。

你想要分配foo，没有括号。这使得myImage.onclick引用函数foo()，使得当onClick事件发生时调用该函数。

另一答案

它会立即被触发，因为JavaScript解释器读取myVerySpecialFunction()这是一个函数调用，然后尝试将返回的值分配给onclick事件。

实现所需行为的正确方法是将函数myVerySpecialFunction分配给您的事件。而不是函数调用。

它可以这样做：

document.body.onload = addElement;

function addElement () {    var myImage = new Image(400, 100); 
myImage.src = 'https://www.google.com/logos/doodles/2017/holidays-2017-day-2-5240850203279360-s.png'; 
myImage.id = "myImageId";   
myImage.onclick = myVerySpecialFunction; 
document.body.appendChild(myImage);   
} 

function myVerySpecialFunction() {  alert("Knock-knock!"); } 

在这里：https://jsfiddle.net/scubatank115/1gjp8w2o/3/