首頁猿問使用 DOM 事件調用...

使用 DOM 事件調用 Javascript 函數

JavaScript

桃花長相依 2023-02-24 15:44:13

這段代碼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，所以當進一步單擊按鈕時，不會發生任何事情。

反對回復 2023-02-24

翻過高山走不出你

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'

}

然而，當您想要將其他參數傳遞給事件處理程序時，此行為很有用，請考慮以下示例。

const eventCallbackLog = (event, message) => {

const { name } = event.target

console.log(`${name} ${message}`)

}

document.getElementById("myBtn")

.onclick = event => eventCallbackLog(event, 'says hi');

</script>

反對回復 2023-02-24

白衣染霜花

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。這就是為什么您甚至在單擊“嘗試”之前就看到日期的原因

反對回復 2023-02-24

森欄

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>

反對回復 2023-02-24

BIG陽

TA貢獻1859條經驗獲得超6個贊

在這種情況下分配完成

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

但在這種情況下，該函數被調用

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

反對回復 2023-02-24

心有法竹

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

反對回復 2023-02-24

6 回答
0 關注
205 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 DOM 事件調用 Javascript 函數

使用 DOM 事件調用 Javascript 函數

6 回答

添加回答