使用 DOM 事件调用 Javascript 函数
这段代码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 。我正在努力理解逻辑。
桃花长相依浏览 174回答 6
6回答
-
子衿沉夜
document.getElementById("myBtn").onclick = displayDate;在上面的行中，您通过将函数名称分配给属性onclick来将“myBtn”的点击事件订阅到displayDate函数document.getElementById("myBtn").onclick = displayDate();在这种情况下，您将调用displayDate函数并将displayDate函数的返回值分配给onlclick属性。这里的displayDate函数没有返回任何东西。所以undefined被分配给onclick属性。当 javascript 运行时执行此行时，displayDate函数在评估赋值操作时执行，并且由于未定义被赋值给onclick，所以当进一步单击按钮时，不会发生任何事情。 -
翻过高山走不出你
作为初学者，要全神贯注有点困难。如果您熟悉其他语言的引用，例如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> -
白衣染霜花
如果我正确理解你的问题，// CASE 1document.getElementById("myBtn").onclick = displayDate;相当于// CASE 2document.getElementById("myBtn").onclick = function() { displayDate();};在这里，您将一个函数分配给 onclick，它将在单击时执行。在 CASE 1 中，displayDate保存分配给 onclick 的函数。所以当你点击时它会被执行但是当你这样做的时候// notice () after displayDatedocument.getElementById("myBtn").onclick = displayDate();这里先执行displayDate，返回值赋值给onclick。这就是为什么您甚至在单击“尝试”之前就看到日期的原因 -
森栏
您在此处分配函数引用，在行下方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阳
在这种情况下分配完成document.getElementById("myBtn").onclick = displayDate;但在这种情况下，该函数被调用document.getElementById("myBtn").onclick = displayDate(); -
心有法竹
它的概念是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
随时随地看视频慕课网APP
相关分类
JavaScript