转载自: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>

js中在window.onload中写function函数产生的问题的更多相关文章

  1. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

      body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...

  2. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  3. Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间 win ...

  4. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

  5. jquery $(document).ready() 与js原生的window.onload的区别总结

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  6. window.onload中失效的问题

    在页面中,我们有时候想让页面加载的时候有多个JS事件,一般的时候我们会这样做 window.onload=function(){ alert("aaa"); } window.on ...

  7. window.onload中调用函数报错的问题

    今天练习js,忽然遇到了一个问题,就是window.onload加载完成后,调用其中的函数会报错, 上一段简单的代码: 报错信息: 报错原因: 当window.onload加载完成后,第一个alert ...

  8. 在window.onload中使用setTimeout

    window.onload = function(){ function n(i){ alert(1); } setTimeout('n(1)',2000); } 以上代码会报错:n() is not ...

  9. JavaScript向window onload添加加载函数

    有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...

随机推荐

  1. iOS开发UIMotionEffect运动视觉效果

    1.UIMotionEffect简介 在iOS7.0推出了UIMotionEffect运动视觉效果,就是从屏幕偏移不同角度.看到的效果不同! NS_CLASS_AVAILABLE_IOS(7_0) @ ...

  2. hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...

  3. element表单验证

    rules: { name:[{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 2, max: 5, message: '长度 ...

  4. 关于切片/截取(slice)和random模块的使用(实例:猜单词小游戏)

    切片和random的使用在源码中都有注释(可以直接下载):https://github.com/NoobZeng/GuessWords 1. README.MD 基于Python的猜单词游戏 猜单词小 ...

  5. 8.关于ActiveMQ、RocketMQ、RabbitMQ、Kafka一些总结和区别

    这是一篇分享文 转自:http://www.cnblogs.com/williamjie/p/9481780.html  尊重原作,谢谢 消息队列 为什么写这篇文章? 博主有两位朋友分别是小A和小B: ...

  6. PropertyPlaceholderConfigurer的注意事项

    1.基本的使用方法是<bean id="propertyConfigurerForWZ" class="org.springframework.beans.fact ...

  7. linux及windows安装maven

    一.linux安装maven 1.wget http://mirror.bit.edu.cn/apache/maven/maven-3/3.6.1/binaries/apache-maven-3.6. ...

  8. Matlab神经网络验证码识别

    本文,将会简述如何利用Matlab的强大功能,调用神经网络处理验证码的识别问题.  预备知识,Matlab基础编程,神经网络基础.  可以先看下: Matlab基础视频教程 Matlab经典教程--从 ...

  9. System.UriFormatException: Invalid URI 解决方法

    mobox 企业网页登陆界面,sa 登陆后 提示 System.UriFormatException: Invalid URI: The URI scheme is not valid. at Sys ...

  10. sulin Python3.6爬虫+Djiago2.0+Mysql --实例demo

    1.切换到项目目录下,启动测试服务器 manage.py runserver 192.168.0.108:8888 2.设置相关配置 项目目录展示如下: beauty=>settings.py ...