js中在window.onload中调用function函数遇到的疑惑

最新推荐文章于 2025-08-29 08:00:00 发布

原创最新推荐文章于 2025-08-29 08:00:00 发布 · 1.3w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js

javaScript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在JavaScript中使用onclick属性监听函数时遇到的作用域问题。通过对比不同定义方式下函数的行为，揭示了作用域对函数访问的影响，并提供了解决方案。

今天在jsp中的form表单利用οnclick=”xxx”来监听js中一个function xxx(){}函数，遇到一个很奇怪的问题就是点击submit按钮之后竟然没有响应xxx()函数。在这之前我已经多次在form表单中利用οnclick=”xxx”来监听一个函数，并没有出现过这种情况。这经过多次尝试后，和具体分析，与之前的对比，终于找到为何会出现这个问题。为了直插问题所在我用一个实例的代码来说明问题。

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.onload=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.onload=function(){
     alert("hahaha"); 
}
function cphclick(){
     alert("xixixi");
}
</script>

这时也许机敏点的同学可能想到了是作用域的问题。对没错就是作用域的问题。加上window.onload后改变了cphclick（）函数的作用域，使其成为内部函数，故而οnclick=”“无法访问到这个函数，而放到外面cphclick()是绑定在window上的，所以οnclick=”“能够访问到。
那么现在又有一个新的需求，我就是想在页面加载完成之后再执行函数怎么办，其实我们可以改变onload()里面函数的作用域为绑定在window上的，用的方法就是对象.函数。实例：

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

</script>