JavaScript: window.onload = function() {} 里面的函数不执行
问题:写了一个最简单的页面。在script标签中使用的 window.onload = function() { function add() { //... } }
页面上:<div onclick="add()"></div>
但是,函数不仅没有触发,同时控制台报错:add() is not defined.
分析:这里需要两个背景知识:1)HTML页面执行顺序为自上而下;2)window.onload=function() {}会等页面全部加载完毕后再执行。
基于上面两点,当程序执行到window.onload的时候,不会去解析里面的内容。但是,当解析到div标签上的onclick函数的时候,就会去找add()函数,这个时候发现程序里面是没有的,所以就会报错。
解决:这个时候,可以使用obj.onclick = add; 就可以了。
注意:1)obj: 这个是些onclick事件的那个标签的DOM对象;2)add后面不需要加()。如果加了就成了闭包,所以,直接写名字就可以了。这是两个需要注意的细节。
参考:https://www.cnblogs.com/magicgua/p/4363903.html#commentform
感谢@magicgua的分享
JavaScript: window.onload = function() {} 里面的函数不执行的更多相关文章
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
- javascript window.onload 加载多个函数的方法
用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或 ...
- JavaScript window.onload 事件和 jQuery ready 函数有何不同?
JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...
- js常见执行方法window.onload = function (){},$(document).ready()
1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...
- JQUERY的$(function(){})和window.onload=function(){}的区别
在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...
- JQUERY的$(function(){})和window.onload=function(){}的区别【转】
在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...
- window.onload 添加多个函数绑定
window.onload = function(){alert(2)} function addEvent (fun) { var old = window.onload; if(typeof ol ...
- 页面加载之window.onload=function(){} 和 $(function(){})的区别
通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...
- jQuery $(document).ready()和JavaScript window.onload()事件的区别
一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...
随机推荐
- LeetCode 881.救生艇(C++)
第 i 个人的体重为 people[i],每艘船可以承载的最大重量为 limit. 每艘船最多可同时载两人,但条件是这些人的重量之和最多为 limit. 返回载到每一个人所需的最小船数.(保证每个人都 ...
- 在vs2010使用EF出现CS0012: 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义
网上查了一通都是在web.config中配置 System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c56 ...
- maven课程 项目管理利器-maven 5-1 课程总结 1星(2018-11-08 07:19)
1 maven windows环境搭建和配置环境变量 2 maven骨架和pom.xml 解析 3 命令行窗口常用的maven命令 4 仓库和坐标 5 maven Java项目 6 生命周期,依赖聚合 ...
- The thirteen day
Well begun is hanlf done 良好的开端是成功的一半.(此句是省略句,Something that is well begun is something that is half ...
- C++ VS编译问题--LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
用VS编译时,当出现错误LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏: 这个问题的解决方案为: 1. 找到项目\xx属性\配置属性\清单工具\输 ...
- AOSP 源码整编单编
<AOSP 源码下载>完成后,就可以开编了. 整编 整编,顾名思义就是编译整个 Android 源码,最终 out 目录会生成几个重要的镜像文件,其中有 system.img.userda ...
- mysql> set sql_mode=''; mysql> set sql_mode='traditional';
mysql> set sql_mode=''; mysql> set sql_mode='traditional';
- ansible使用8-Best Practices
Content Organization production # inventory file for production servers stage # inventory file for s ...
- bootstrap-table 数据表格行内修改
bootstrap-table 数据行内修改js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",// ...
- 在Markdown中插入不会显示的注释文本
方法1 <!-- your comment goes here --> 方法2 [//]: <> (This is also a comment.) 原文地址: https:/ ...