这段代码displayDate()中的函数“ document.getElementById("myBtn").onclick = displayDate;”怎么来的：<!DOCTYPE html><html><body><p>Click "Try it" to execute the displayDate() function.</p><button id="myBtn">Try it</button><p id="demo"></p><script>document.getElementById("myBtn").onclick = displayDate;function displayDate() { document.getElementById("demo").innerHTML = Date();}</script></body></html>在没有 . 的情况下被调用()。请注意，当您介绍 时()，就像这样；document.getElementById("myBtn").onclick = displayDate();, 该功能将自动执行，无需按下按钮Try it；<button id="myBtn">Try it</button>. 它是来自 w3schools.com 的代码片段：https://www.w3schools.com/js/tryit.asp ?filename=tryjs_events2 。我正在努力理解逻辑。
6 回答
子衿沉夜
TA贡献1828条经验 获得超3个赞
document.getElementById("myBtn").onclick = displayDate;在上面的行中，您通过将函数名称分配给属性onclick来将“myBtn”的点击事件订阅到displayDate函数
document.getElementById("myBtn").onclick = displayDate();在这种情况下，您将调用displayDate函数并将displayDate函数的返回值分配给onlclick属性。
这里的displayDate函数没有返回任何东西。所以undefined被分配给onclick属性。
当 javascript 运行时执行此行时，displayDate函数在评估赋值操作时执行，并且由于未定义被赋值给onclick，所以当进一步单击按钮时，不会发生任何事情。
翻过高山走不出你
TA贡献1875条经验 获得超3个赞
作为初学者，要全神贯注有点困难。如果您熟悉其他语言的引用，例如C，您实际上是将指向函数的指针传递给处理程序onClick。
根据MDN 定义：
functionRef是函数名或函数表达式。该函数接收一个MouseEvent对象作为其唯一参数。在函数中，这将是触发事件的元素。
用易于理解的术语来说，发生的事情是传递一个函数引用，该函数引用由onclickEventHandler 在事件上触发，并尝试将其传递给DOM onevent 处理程序event中的任何内容（在这种情况下，我们应该将事件作为参数传递给函数引用）onclick
如果我们要伪声明处理程序onclick，它看起来像这样：
// this is very simplified, but serves as illustration
const onclick = (event: MouseEvent<HTMLELement>) => {
yourFunctionReference(event)
}
因此，每次触发事件时，DOM onevent 处理程序都会将事件传递给函数引用并调用函数。
如果您改为调用处理程序中的函数onclick，它只会将返回值传递给它，这通常不是您想要的，例如。
const returnHi = () => 'hi'
document.getElementById("myBtn").onclick = returnHi();
基本上会导致
const onclick = (event) => {
'hi'
}
然而，当您想要将其他参数传递给事件处理程序时，此行为很有用，请考虑以下示例。
<button name="myBtn" id="myBtn">Try it</button>
<p id="demo"></p>
<script>
const eventCallbackLog = (event, message) => {
const { name } = event.target
console.log(`${name} ${message}`)
}
document.getElementById("myBtn")
.onclick = event => eventCallbackLog(event, 'says hi');
</script>
白衣染霜花
TA贡献1796条经验 获得超10个赞
如果我正确理解你的问题，
// CASE 1
document.getElementById("myBtn").onclick = displayDate;
相当于
// CASE 2
document.getElementById("myBtn").onclick = function() {
displayDate();
};
在这里，您将一个函数分配给 onclick，它将在单击时执行。
在 CASE 1 中，displayDate保存分配给 onclick 的函数。所以当你点击时它会被执行
但是当你这样做的时候
// notice () after displayDate
document.getElementById("myBtn").onclick = displayDate();
这里先执行displayDate，返回值赋值给onclick。这就是为什么您甚至在单击“尝试”之前就看到日期的原因
森栏
TA贡献1810条经验 获得超5个赞
您在此处分配函数引用，在行下方
document.getElementById("myBtn").onclick = displayDate; // function reference
下面一行会将函数的返回值赋给 the ，onclick除非你function从displayDate()
document.getElementById("myBtn").onclick = displayDate(); // Assignins return value
现在当你返回一个函数时，它会起作用
function displayDate() {
return function() {
document.getElementById("demo").innerHTML = Date();
}
}
document.getElementById("myBtn").onclick = displayDate();
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
BIG阳
TA贡献1859条经验 获得超6个赞
在这种情况下分配完成
document.getElementById("myBtn").onclick = displayDate;但在这种情况下，该函数被调用
document.getElementById("myBtn").onclick = displayDate();
心有法竹
TA贡献1866条经验 获得超5个赞
它的概念是callback：
document.getElementById("myBtn").onclick = displayDate;
将命名函数分配displayDate给回调onClick。这意味着在某些时候代码将调用onclick，因此执行您的函数。它的工作方式与此类似：
function test(){alert("i'm executed!")}
function executeThis(func){
setTimeout(function(){
func() // <-- here the function is called!
}, 2000);
}
executeThis(test); // <-- here the function is passed for reference
另一方面，以这种方式传递回调：
document.getElementById("myBtn").onclick = displayDate();
将传递给回调的结果displayDate
例如：
function test(){
console.log("i'm executed!");
return function(){
alert("i'm the return value");
}
}
function executeThis(func){
setTimeout(function(){
func() // <-- here the function RESULT is called!
}, 2000);
}
executeThis(test()); // <-- here the function is executed and its result is passed
添加回答
举报
0/150
提交
取消