转载自: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. vue.js出现cannot get /错误

    config中的index.js 原来是 assetsPublicPath: './', 改为 assetsPublicPath: '/',

  2. Git合并时遇到冲突或错误后取消合并

    当合并分支时遇到错误或者冲突,分支旁边会多出“|MERGING”这个东西 有这个状态存在时,会导致后面想要再合并的时候提示如下 所以需要先取消这次合并,使用“git merge --abort”命令

  3. 16.ajax_case05

    # 抓取36氪快讯 # https://36kr.com/newsflashes import requests import json header = { 'Accept': 'text/html ...

  4. 解析Asp.net Core中使用Session的方法

    2017年就这么悄无声息的开始了,2017年对我来说又是特别重要的一年. 元旦放假在家写了个Asp.net Core验证码登录, 做demo的过程中遇到两个小问题,第一是在Asp.net Core中引 ...

  5. java_Set接口

    /** * Set接口:extends Collection接口 * 不重复性 * 无序 * * java.util.HashSet: * 实现Set接口,不保证set的迭代顺序,无序集合 * 底层是 ...

  6. JS规则 编程练习 考考大家的数学,计算以下计算公式的结果。然后在浏览器中运行一下,看看结果是否跟你的结果一致。

    编程练习 考考大家的数学,计算以下计算公式的结果.然后在浏览器中运行一下,看看结果是否跟你的结果一致. 任务 第一步: 在  ? 处填写你的答案. 第二步: 填写完成后,运行一下,看看是不是跟你填写的 ...

  7. [NOIP2019模拟赛][AT2381] Nuske vs Phantom Thnook

    题目链接 评测姬好快啊(港记号?)暴力40pts变成60pts 因为题目说了保证蓝色点两两之间只有一条路径,所以肯定组成了一棵树,而对于每次询问的x1,y1,x2,y2的子矩阵中就存在着一个森林 不难 ...

  8. 【学术篇】洛谷1550——打井Watering Hole

    题目の传送门:https://www.luogu.org/problem/show?pid=1550 精简版题意(本来就精简了不是么):n个点,每个点可以选择打井或从别的有水的点引水,求所有点都有水用 ...

  9. error in ./src/pages/login.vue?vue&type=style&index=0&lang=less&

    vue-cli3创建less工程,npm run serve 无法运行 bug解决方法: rm -rf node-modules 修改package.json为 "less": & ...

  10. css,js文件后面加一个版本号

    由于前几天,更新了项目,更新的文件有js文件,今天客人截图过来,我发现修改之后的效果没有显示出来,我回复说清理浏览器缓存.到了晚上,客人找老板,说还没有处理到這个,说客人不懂這个.所以想到之前自己为了 ...