鍍金池/ 問答/HTML/ 原生的JavaScript綁定onclick事件卻產生onload的效果?

原生的JavaScript綁定onclick事件卻產生onload的效果?

在用原生JavaScript的對象綁定的方式綁定onclick事件, 出來的實際效果卻類似于onload的效果.
想要鼠標點擊按鈕彈窗提示, 可是實際上卻是頁面一加載就彈窗提示, 點擊反而沒有效果.

為此, 我嘗試了三種方式:

  1. 實名函數(shù), 在按鈕屬性中調用(屬性綁定). OK!
  2. 匿名函數(shù), 屬性綁定和對象綁定均OK!
  3. 適應函數(shù), 賦值給按鈕對象的屬性onclick(對象綁定), 就出現(xiàn)了上文所說的錯誤!Error

請看代碼片:
1.對象綁定事件(失敗)

//設置點擊按鈕//
<button id="b"  >點擊</button>
<script type="text/javascript">
//定義實名函數(shù)fun(), 實現(xiàn)彈窗效果//
function fun() {
alert("xxxx");
}

document.getElementById("b").onclick = fun();  //?: onclick 怎么成了onload的效果?

2.匿名函數(shù)綁定(成功)

//設置點擊按鈕//
<button id="b"  >點擊</button>
<script type="text/javascript">
//定義匿名函數(shù)fun(), 實現(xiàn)彈窗效果//
document.getElementById("b").onclick = function(){
   alert("xxxx");
}

3.實名函數(shù), 屬性綁定(成功)

//設置button的屬性onclick綁定fun()//
<button id="b"  onclick="fun()">點擊</button>
<script type="text/javascript">
//定義實名函數(shù)//
function fun() {
    alert("xxxx");
}

為什么第一種方式偏偏失敗呢? 這是什么機制導致的?

回答
編輯回答
冷眸

lz我貌似知道問題所在了!
請看圖片:
圖片描述

2018年7月18日 06:38
編輯回答
命于你

補充一下，行內的js代碼onclick="fun()"這樣就需要加括號，還有其他事件也是，會解析引號中的可執(zhí)行代碼，還有setTimeout和setInterval方法也類似：

setTimeout(alert(1),3000);
setTimeout("alert(2)",3000);
setInterval(alert(3),3000);
setInterval("alert(4)",3000);
//1
//3
//2
//4
//不加引號立即執(zhí)行

之前學習也也遇到這樣的疑問。

2018年1月21日 15:02
編輯回答
久礙你

覺得你在某些方面的理解不對，javascript中，函數(shù)是一等公民，因此可以進行賦值等操作。

但是 fun() 帶括號是對函數(shù)的執(zhí)行，所以先執(zhí)行fun函數(shù)，然后返回值賦值給了onclick

xxx.onclick = fun 是將函數(shù) fun 賦值給onclick，函數(shù)沒有執(zhí)行。

可以分別查看 fun 和 fun() ,一個是function，一個是結果的返回值

console.log(fun);
console.log(fun());

不是因為匿名函數(shù)的原因，根本原因還是函數(shù)執(zhí)行的問題

xxx.onclick = (function(){})() 這個也是匿名函數(shù)，但是這個匿名函數(shù)執(zhí)行了，所以賦值的是結果，而不是函數(shù)

2018年9月11日 14:40
編輯回答
扯機薄

還有其他事件也是: happy wheels full version and moto x3m

2018年9月5日 20:09