Javascript JS创建对象，添加onclick函数。函数在创建时随意激发

我有以下代码：

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解决问题，但我不喜欢它

---

正如Mark和Andy在对您的问题的评论中所述，这是由于您试图将您的功能分配给

onClick

事件

在JavaScript中，调用函数和将函数赋值给属性是有区别的。比如说,

让myImage=newimage（400100）；
函数foo（）{console.log（你好，world！）；}
myImage.onclick=foo（）；//由于foo（）不返回任何值，myImage.onclick被设置为undefined。
myImage.onclick=foo；//myImage.onclick被设置为对函数foo（）的引用。

当您将

foo（）

分配给

onClick

事件时，您实际说的是“分配函数

foo（）

返回到

myImage.onClick

的值”。因此，会立即调用该函数

---

相反，您希望分配

foo

，而不带括号。这使得

myImage.onclick

引用函数

foo（）

，从而在

onclick

事件发生时调用该函数。

正如Mark和Andy在对您的问题的评论中所述，这是由于您试图将函数分配给

onclick

事件

在JavaScript中，调用函数和将函数赋值给属性是有区别的。比如说,

让myImage=newimage（400100）；
函数foo（）{console.log（你好，world！）；}
myImage.onclick=foo（）；//由于foo（）不返回任何值，myImage.onclick被设置为undefined。
myImage.onclick=foo；//myImage.onclick被设置为对函数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!"); } 

---

此处：

它会立即触发，因为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!"); } 

---

这里：

这是因为您正在调用函数。使用

myImage.onclick=myverysspecialfunction

，因为您会立即调用它，而不是给它函数的引用。尝试myImage.onclick=myVerySpecialFunction相反。@Andy你们都是对的。但如果将来我想用一个参数调用我的函数，那么我应该如何正确地描述它呢？这是因为您正在调用函数。使用

myImage.onclick=myverysspecialfunction

，因为您会立即调用它，而不是给它函数的引用。尝试myImage.onclick=myVerySpecialFunction相反。@Andy你们都是对的。但如果将来我想用一个参数调用我的函数，那么我应该如何正确地描述它呢？但如果将来我想用一个参数调用我的函数，那么我应该如何正确地描述它呢？jsfiddle.net/kv8w78be/5我想要一个参数。通过setAttribute上的括号，我可以得到这种行为。@Areso这是一个完全不同的问题，但简而言之，您希望使用

addEventListener（）

，而不是直接指定给事件挂钩。请看一看，了解更多信息。@Areso，为什么要尝试向该元素添加两个函数？您可以使用

onclick

将一个添加到元素中，然后尝试使用

setAttribute

@Andy将另一个添加到同一元素中。我是有意这样做的。第一次（通过object）显示我尝试修复的内容，第二次（通过setAttribute）显示我尝试实现的内容。正如Jeffrey所建议的，我寻找了另一个答案，我希望通过setAttribute（我做得很正确）或addEventListener（我完全不熟悉JS中的这种方法）实现什么。但是如果我想在将来用一个参数调用我的函数，那么我应该如何正确地描述它呢？jsfiddle.net/kv8w78be/5我想要一个参数。通过setAttribute上的括号，我可以得到这种行为。@Areso这是一个完全不同的问题，但简而言之，您希望使用

addEventListener（）

，而不是直接指定给事件挂钩。请看一看，了解更多信息。@Areso，为什么要尝试向该元素添加两个函数？您可以使用

onclick

将一个添加到元素中，然后尝试使用

setAttribute

@Andy将另一个添加到同一元素中。我是有意这样做的。第一次（通过object）显示我尝试修复的内容，第二次（通过setAttribute）显示我尝试实现的内容。正如Jeffrey所建议的，我寻找了另一个答案，我希望通过setAttribute（我做得很正确）或addEventListener（我完全不熟悉JS中的这种方法）实现什么。