• 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代码:

     1 jsp代码:
     2 <form action="/interviweText/ajaxSort"  method="post">
     3 <input type="text" name="number" id="number"/>
     4 <input type="submit"  id="tijiao" onclick="cphclick();" value="提交"/>
     5 </form>
     6 js代码:
     7 <script type="text/javascript">
     8 window.οnlοad=function(){
     9      alert("hahaha");
    10      function cphclick(){
    11          alert("xixixi");
    12      }
    13 }
    14 </script>

    就是这个很简短的代码 ,当运行这个jsp之后自动弹出“hahaha”对话框,这个没有问题,当jsp页面加载完成之后会自动运行window.onload中的代码。但问题就出现在当我点击“提交”按钮之后并没有弹出“xixixi”对话框。初一看没有问题啊,我已经οnclick=”cphclick();”监听cphclick()函数了,理应跳出来“xixixi”对话框才对。并且这样之前也用过了,查看之前的js代码发现当把cphclick()函数提到外面点击”提交”就可以弹出“xixixi”对话框。js修改如下:

    1 <script type="text/javascript">
    2 window.οnlοad=function(){
    3      alert("hahaha"); 
    4 }
    5 function cphclick(){
    6      alert("xixixi");
    7 }
    8 </script>


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

     1 <script type="text/javascript">
     2 window.οnlοad=function(){
     3      alert("hahaha");
     4      var tijiao=document.getElementById("tijiao");
     5      tijiao.cphclick=function(){
     6          alert("xixixi");
     7     }
     8 }
     9 
    10 </script>
  • 相关阅读:
    【python学习笔记02】python的数据类型2
    元器件选型(一)ESD、TVS参考资料
    【python学习笔记01】python的数据类型
    你不知道的vue生命周期钩子选项(三)
    vue源码解析之选项合并(二)
    vue源码解析之选项合并(一)
    聊聊var与let 在window下面的区别(除开作用域)
    浅谈JavaScript中的防抖和节流
    Redhat6.4下安装Oracle10g
    Ubuntu Server 14.04 集成
  • 原文地址:https://www.cnblogs.com/FengZeng666/p/11743658.html
Copyright © 2020-2023  润新知