使用 DOM 事件调用 Javascript 函数

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