js中在window.onload中寫function函數產生的問題

轉載自：https://blog.csdn.net/c_p_h/article/details/63684510

 

今天在jsp中的form表單利用οnclick=”xxx”來監聽js中一個function xxx(){}函數，遇到一個很奇怪的問題就是點擊submit按鈕之后竟然沒有響應xxx()函數。在這之前我已經多次在form表單中利用οnclick=”xxx”來監聽一個函數，並沒有出現過這種情況。這經過多次嘗試后，和具體分析，與之前的對比，終於找到為何會出現這個問題。為了直插問題所在我用一個實例的代碼來說明問題。

jsp代碼：

jsp代碼：
<form action="/interviweText/ajaxSort"  method="post">
<input type="text" name="number" id="number"/>
<input type="submit"  id="tijiao" onclick="cphclick();" value="提交"/>
</form>
js代碼：
<script type="text/javascript">
window.οnlοad=function(){
     alert("hahaha");
     function cphclick(){
         alert("xixixi");
     }
}
</script>

 

就是這個很簡短的代碼 ，當運行這個jsp之后自動彈出“hahaha”對話框，這個沒有問題，當jsp頁面加載完成之后會自動運行window.onload中的代碼。但問題就出現在當我點擊“提交”按鈕之后並沒有彈出“xixixi”對話框。初一看沒有問題啊，我已經οnclick=”cphclick();”監聽cphclick（）函數了，理應跳出來“xixixi”對話框才對。並且這樣之前也用過了，查看之前的js代碼發現當把cphclick（）函數提到外面點擊”提交”就可以彈出“xixixi”對話框。js修改如下：

<script type="text/javascript">
window.οnlοad=function(){
     alert("hahaha"); 
}
function cphclick(){
     alert("xixixi");
}
</script>

 

這時也許機敏點的同學可能想到了是作用域的問題。對沒錯就是作用域的問題。加上window.onload后改變了cphclick（）函數的作用域，使其成為內部函數，故而οnclick=”“無法訪問到這個函數，而放到外面cphclick()是綁定在window上的，所以οnclick=”“能夠訪問到。
那么現在又有一個新的需求，我就是想在頁面加載完成之后再執行函數怎么辦，其實我們可以改變onload()里面函數的作用域為綁定在window上的，用的方法就是對象.函數。實例：

<script type="text/javascript">
window.οnlοad=function(){
     alert("hahaha");
     var tijiao=document.getElementById("tijiao");
     tijiao.cphclick=function(){
         alert("xixixi");
    }
}

</script>