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

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. overload和override二者之间的区别

    overload和override三者之间的区别 Overload是重载,是有相同的方法名,但参数类型或个数彼此不同Override是重写,是在子类与父类中,子类中的方法的方法名,参数个数.类型都与父 ...

  2. Http学习(一)

    HTTP 超文本传输协议 综述: HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从 ...

  3. 深刻理解Vue中的组件

    转载:https://segmentfault.com/a/1190000010527064 --20更新: Vue2.6已经更新了关于内容插槽和作用域插槽的API和用法,为了不误导大家,我把插槽的内 ...

  4. SpringCloud学习笔记(七):Hystrix断路器

    概述 什么时候需要断路器?熔断? 举个简单的例子:小明喜欢小美,可是小美没有电话,小美给了小明家里的座机,小明打给座机,这个时候小美的妈妈接到了,小明怕妈妈知道自己喜欢小美,就跟小美妈妈说让小美哥接电 ...

  5. Spring Cloud Config的配置中心使用非对称性加密

    首先,我们需要通过keytool工具来生成密钥对. keytool是JDK中的一个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认 ...

  6. PAT甲级——A1131 Subway Map【30】

    In the big cities, the subway systems always look so complex to the visitors. To give you some sense ...

  7. Minifilter 相关

    FLTFL_OPERATION_REGISTRATION_SKIP_PAGING_IO 商用软件一定要过滤掉这个类型的请求,这个类型的请求响应非常慢. FLTFL_OPERATION_REGISTRA ...

  8. java_初始网络编程

    /** * 网咯编程入门: *  c/s结构:全称Client/Server结构,是指客户端和服务器结构.常见程序有qq.迅雷等如那件 *  B/S结构:全称Browser/Server结构,是指浏览 ...

  9. SpringBoot集成JPA根据实体类自动生成表

    数据库是mysql,在application.properties中的写法如下: 原来配置这样的时候确实可以生产表的 #spring.jpa.hibernate.ddl-auto=update 多方查 ...

  10. Python全栈开发:Mysql(二)

    视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT *FROM (SELEC ...