使用DOM事件调用Javascript函数

为什么

displayDate（）

函数“

document.getElementById（“myBtn”）.onclick=displayDate；

”出现在：

单击“重试”以执行displayDate（）函数

试试看

document.getElementById（“myBtn”）.onclick=displayDate；
函数displayDate（）{
document.getElementById（“demo”）.innerHTML=Date（）；
}

---

在没有

（）

的情况下调用。注意，当您引入

（）

时，如下所示<代码>文档.getElementById（“myBtn”）.onclick=displayDate（），该功能将自动执行，无需按下

Try it

按钮<代码>试试看。这是来自w3schools.com的代码片段：。我正在努力获取逻辑。

在这种情况下，任务已完成

document.getElementById（“myBtn”）.onclick=displayDate；

但在这种情况下，函数被调用

document.getElementById（“myBtn”）.onclick=displayDate（）；

如果我正确理解了你的问题

// CASE 1
document.getElementById("myBtn").onclick = displayDate;

相当于

// CASE 2
document.getElementById("myBtn").onclick = function() {
  displayDate();
};

在这里，您为onclick分配一个函数，该函数将在单击时执行

在案例1中，

displayDate

保存分配给onclick的函数。因此，它是在您单击时执行的

但当你这么做的时候

// notice () after displayDate
document.getElementById("myBtn").onclick = displayDate();

---

这里，首先执行displayDate&返回值被分配给onclick。这就是为什么你在点击“试试看”之前就能看到日期的原因。作为一个初学者，你很难理解这一点。如果您熟悉来自其他语言（如）的引用，则实际上是将指向函数的指针传递给

onClick

处理程序

根据报告：

functionRef

是函数名或函数表达式。函数接收一个

MouseEvent

对象作为其唯一参数。在函数中，这将是触发事件的元素

用可以理解的术语来说，所发生的事情是传递一个函数引用，

onclick

EventHandler在事件发生时触发该函数引用，并尝试将

event

传递给

onclick

domonevent处理程序中的任何对象（在这种情况下，我们应该将事件作为参数传递给函数引用）

如果我们伪声明

onclick

处理程序，它将如下所示：

// this is very simplified, but serves as illustration 
const onclick = (event: MouseEvent<HTMLELement>) => {
   yourFunctionReference(event)
}

基本上会导致

const onclick=（事件）=>{
“嗨”
}

此行为是有用的，当您想将其他参数传递给事件处理程序时，请考虑下面的示例。

试试看

const eventCallbackLog=（事件、消息）=>{
const{name}=event.target
log（`${name}${message}`）
}
document.getElementById（“myBtn”）
.onclick=event=>eventCallbackLog（event，'says hi'）；

您正在第行下方的此处分配函数引用

document.getElementById("myBtn").onclick = displayDate; // function reference

下一行将函数的返回值分配给

onclick

，除非您从

displayDate（）

返回

函数，否则该返回值没有意义

现在，当您返回一个函数时，它将工作
函数displayDate（）{
返回函数（）{
document.getElementById（“demo”）.innerHTML=Date（）；
}
}
document.getElementById（“myBtn”）.onclick=displayDate（）
单击“重试”以执行displayDate（）函数

试试看

在上一行中，您将“myBtn”的点击事件订阅到displayDate
通过将函数名称指定给属性onclick

document.getElementById("myBtn").onclick = displayDate();

在这种情况下，您正在调用displayDate函数，并且displayDate函数的返回值被分配给onlclick属性

此处displayDate函数不返回任何内容。因此，undefined被分配给onclick属性

当javascript运行时执行这一行时，displayDate函数在评估赋值操作时被执行，而undefined被赋值给onclick当进一步单击按钮时，不会发生任何事情。
这是
回调的概念：

document.getElementById("myBtn").onclick = displayDate;

将命名函数
displayDate
分配给
onClick
回调函数。这意味着，在某一点上，代码将调用
onclick
，因此执行您的函数。
其工作方式与此类似：


function test（）{alert（“我被执行了！”）}
函数executeThis（func）{
setTimeout（函数（）{
正在调用func（）/“，但没有（）”。您正在“给”浏览器对函数的引用（因此没有
（）
），并且浏览器将在事件发生时调用函数。
functionCall（）
将始终直接在javascript中执行。如果有什么问题的话，
…
就像魔术一样，因为它创建了一个事件侦听器，并将您的代码包装在场景后面的事件处理程序函数中。
document.getElementById("myBtn").onclick = displayDate;

document.getElementById("myBtn").onclick = displayDate();

document.getElementById("myBtn").onclick = displayDate;