第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

使用 DOM 事件調(diào)用 Javascript 函數(shù)

使用 DOM 事件調(diào)用 Javascript 函數(shù)

桃花長(zhǎng)相依 2023-02-24 15:44:13
這段代碼displayDate()中的函數(shù)“ 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>在沒有 . 的情況下被調(diào)用()。請(qǐng)注意，當(dāng)您介紹 時(shí)()，就像這樣；document.getElementById("myBtn").onclick = displayDate();, 該功能將自動(dòng)執(zhí)行，無需按下按鈕Try it；<button id="myBtn">Try it</button>. 它是來自 w3schools.com 的代碼片段：https://www.w3schools.com/js/tryit.asp ?filename=tryjs_events2 。我正在努力理解邏輯。
查看完整描述

6 回答

?
子衿沉夜

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

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

在上面的行中，您通過將函數(shù)名稱分配給屬性onclick來將“myBtn”的點(diǎn)擊事件訂閱到displayDate函數(shù)

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

在這種情況下，您將調(diào)用displayDate函數(shù)并將displayDate函數(shù)的返回值分配給onlclick屬性。

這里的displayDate函數(shù)沒有返回任何東西。所以undefined被分配給onclick屬性。

當(dāng) javascript 運(yùn)行時(shí)執(zhí)行此行時(shí)，displayDate函數(shù)在評(píng)估賦值操作時(shí)執(zhí)行，并且由于未定義被賦值給onclick，所以當(dāng)進(jìn)一步單擊按鈕時(shí)，不會(huì)發(fā)生任何事情。


查看完整回答
反對(duì) 回復(fù) 2023-02-24
?
翻過高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

作為初學(xué)者，要全神貫注有點(diǎn)困難。如果您熟悉其他語言的引用，例如C，您實(shí)際上是將指向函數(shù)的指針傳遞給處理程序onClick。


根據(jù)MDN 定義：


functionRef是函數(shù)名或函數(shù)表達(dá)式。該函數(shù)接收一個(gè)MouseEvent對(duì)象作為其唯一參數(shù)。在函數(shù)中，這將是觸發(fā)事件的元素。


用易于理解的術(shù)語來說，發(fā)生的事情是傳遞一個(gè)函數(shù)引用，該函數(shù)引用由onclickEventHandler 在事件上觸發(fā)，并嘗試將其傳遞給DOM onevent 處理程序event中的任何內(nèi)容（在這種情況下，我們應(yīng)該將事件作為參數(shù)傳遞給函數(shù)引用）onclick


如果我們要偽聲明處理程序onclick，它看起來像這樣：


// this is very simplified, but serves as illustration 

const onclick = (event: MouseEvent<HTMLELement>) => {

   yourFunctionReference(event)

}

因此，每次觸發(fā)事件時(shí)，DOM onevent 處理程序都會(huì)將事件傳遞給函數(shù)引用并調(diào)用函數(shù)。


如果您改為調(diào)用處理程序中的函數(shù)onclick，它只會(huì)將返回值傳遞給它，這通常不是您想要的，例如。


const returnHi = () => 'hi'

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

基本上會(huì)導(dǎo)致


const onclick = (event) => {

  'hi'

}

然而，當(dāng)您想要將其他參數(shù)傳遞給事件處理程序時(shí)，此行為很有用，請(qǐng)考慮以下示例。


<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>


查看完整回答
反對(duì) 回復(fù) 2023-02-24
?
白衣染霜花

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

如果我正確理解你的問題，


// CASE 1

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

相當(dāng)于


// CASE 2

document.getElementById("myBtn").onclick = function() {

  displayDate();

};

在這里，您將一個(gè)函數(shù)分配給 onclick，它將在單擊時(shí)執(zhí)行。


在 CASE 1 中，displayDate保存分配給 onclick 的函數(shù)。所以當(dāng)你點(diǎn)擊時(shí)它會(huì)被執(zhí)行


但是當(dāng)你這樣做的時(shí)候


// notice () after displayDate

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

這里先執(zhí)行displayDate，返回值賦值給onclick。這就是為什么您甚至在單擊“嘗試”之前就看到日期的原因


查看完整回答
反對(duì) 回復(fù) 2023-02-24
?
森欄

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊

您在此處分配函數(shù)引用，在行下方


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

下面一行會(huì)將函數(shù)的返回值賦給 the ，onclick除非你function從displayDate()


 document.getElementById("myBtn").onclick = displayDate(); // Assignins return value

現(xiàn)在當(dāng)你返回一個(gè)函數(shù)時(shí)，它會(huì)起作用


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>


查看完整回答
反對(duì) 回復(fù) 2023-02-24
?
BIG陽

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

在這種情況下分配完成

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

但在這種情況下，該函數(shù)被調(diào)用

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


查看完整回答
反對(duì) 回復(fù) 2023-02-24
?
心有法竹

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊

它的概念是callback：


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

將命名函數(shù)分配displayDate給回調(diào)onClick。這意味著在某些時(shí)候代碼將調(diào)用onclick，因此執(zhí)行您的函數(shù)。它的工作方式與此類似：


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


另一方面，以這種方式傳遞回調(diào)：


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

將傳遞給回調(diào)的結(jié)果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


查看完整回答
反對(duì) 回復(fù) 2023-02-24
  • 6 回答
  • 0 關(guān)注
  • 208 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)