首頁猿問原生的JavaScript綁定on...

原生的JavaScript綁定onclick事件卻產(chǎn)生onload的效果?

JavaScript

暮色呼如 2019-05-21 16:59:20

在用原生JavaScript的對(duì)象綁定的方式綁定onclick事件,出來的實(shí)際效果卻類似于onload的效果.想要鼠標(biāo)點(diǎn)擊按鈕彈窗提示,可是實(shí)際上卻是頁面一加載就彈窗提示,點(diǎn)擊反而沒有效果.為此,我嘗試了三種方式:實(shí)名函數(shù),在按鈕屬性中調(diào)用(屬性綁定).OK!匿名函數(shù),屬性綁定和對(duì)象綁定均OK!適應(yīng)函數(shù),賦值給按鈕對(duì)象的屬性onclick(對(duì)象綁定),就出現(xiàn)了上文所說的錯(cuò)誤!Error請(qǐng)看代碼片:1.對(duì)象綁定事件(失敗)//設(shè)置點(diǎn)擊按鈕//點(diǎn)擊//定義實(shí)名函數(shù)fun(),實(shí)現(xiàn)彈窗效果//functionfun(){alert("xxxx");}document.getElementById("b").onclick=fun();//?:onclick怎么成了onload的效果?2.匿名函數(shù)綁定(成功)//設(shè)置點(diǎn)擊按鈕//點(diǎn)擊//定義匿名函數(shù)fun(),實(shí)現(xiàn)彈窗效果//document.getElementById("b").onclick=function(){alert("xxxx");}3.實(shí)名函數(shù),屬性綁定(成功)//設(shè)置button的屬性onclick綁定fun()//點(diǎn)擊//定義實(shí)名函數(shù)//functionfun(){alert("xxxx");}為什么第一種方式偏偏失敗呢?這是什么機(jī)制導(dǎo)致的?

查看完整描述

2 回答

汪汪一只貓

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

覺得你在某些方面的理解不對(duì)，javascript中，函數(shù)是一等公民，因此可以進(jìn)行賦值等操作。但是fun()帶括號(hào)是對(duì)函數(shù)的執(zhí)行，所以先執(zhí)行fun函數(shù)，然后返回值賦值給了onclickxxx.onclick=fun是將函數(shù)fun賦值給onclick，函數(shù)沒有執(zhí)行。可以分別查看fun和fun(),一個(gè)是function，一個(gè)是結(jié)果的返回值console.log(fun);console.log(fun());不是因?yàn)槟涿瘮?shù)的原因，根本原因還是函數(shù)執(zhí)行的問題xxx.onclick=(function(){})()這個(gè)也是匿名函數(shù)，但是這個(gè)匿名函數(shù)執(zhí)行了，所以賦值的是結(jié)果，而不是函數(shù)

反對(duì) 回復(fù) 2019-05-21

qq_笑_17

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

補(bǔ)充一下，行內(nèi)的js代碼onclick="fun()"這樣就需要加括號(hào)，還有其他事件也是，會(huì)解析引號(hào)中的可執(zhí)行代碼，還有setTimeout和setInterval方法也類似：setTimeout(alert(1),3000);setTimeout("alert(2)",3000);setInterval(alert(3),3000);setInterval("alert(4)",3000);//1//3//2//4//不加引號(hào)立即執(zhí)行之前學(xué)習(xí)也也遇到這樣的疑問。