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>
js中在window.onload中写function函数产生的问题的更多相关文章
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别
body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...
- Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 win ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
$().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...
- jquery $(document).ready() 与js原生的window.onload的区别总结
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- window.onload中失效的问题
在页面中,我们有时候想让页面加载的时候有多个JS事件,一般的时候我们会这样做 window.onload=function(){ alert("aaa"); } window.on ...
- window.onload中调用函数报错的问题
今天练习js,忽然遇到了一个问题,就是window.onload加载完成后,调用其中的函数会报错, 上一段简单的代码: 报错信息: 报错原因: 当window.onload加载完成后,第一个alert ...
- 在window.onload中使用setTimeout
window.onload = function(){ function n(i){ alert(1); } setTimeout('n(1)',2000); } 以上代码会报错:n() is not ...
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
随机推荐
- JS switch 分支语句
描述:根据一个变量的不同取值,来执行不同的代码. 语法结构: switch(变量) { case 值1: 代码1; break; case 值2: 代码2; break; case 值3: 代码3; ...
- day19_生成器
20180730 初次上传 20180731 更新,4.列表生成式,以及部分注释 #!/usr/bin/env python # -*- coding:utf-8 -*- # ************ ...
- SSH整合时执行hibernate查询报错:java.lang.ClassCastException: com.ch.hibernate.Depart
今天在整合ssh三个框架时,有一个功能,是查询所有员工信息,且员工表和部门表是多对一的映射关系,代码能正常运行到查询得到一个List集合,但在页面展示的时候,就报异常了, java.lang.Clas ...
- PAT甲级——A1137 Final Grading【25】
For a student taking the online course "Data Structures" on China University MOOC (http:// ...
- 024_mysql应用
初级照片位置:https://www.cnblogs.com/a276665092/gallery/image/277598.html 好丑啊 ,这怎么改啊!!!! 高级:https://www.cn ...
- 第三方模块requests下载
requests下载 英文网站 http://docs.python-requests.org/en/master/ 中文网站 http://docs.python-requests.org/zh_C ...
- 17.splash_case02
# 抓取<我不是药神>的豆瓣评论 import csv import time import requests from lxml import etree fw = open('doub ...
- P1417 烹调方案 /// DP(假设 简化公式 排序)
题目大意: https://www.luogu.org/problemnew/show/P1417 题解 看第一份方法的公式 排序后01背包 #include <bits/stdc++.h> ...
- selenium基础(窗口截图)
窗口截图 目的:当脚本执行出错时对当前窗口进行截图 方法:get_screenshot_as_file() #打开百度首页,搜索“selenium",完成后进行截图,并将结果保存至D:/te ...
- HttpClientUitl工具类
public class HttpClient { private CloseableHttpClient httpClient; public HttpClient() { this.httpCli ...