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 ...
随机推荐
- windows 7下安装MySQL5.6
一. 软件下载 从MySql官网上下载响应的版本,我的是5.6.17. 二.安装过程 以管理员权限运行安装程序,收集信息. 选择安装MySql产品,如果之前有安装过,那么就选择更新了. 同意Licen ...
- 《Flink 源码解析》—— 源码编译运行
更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...
- 织梦DEDECMS {dede:arclist},{dede:list}获取附加表字段内容
以前用织梦DEDECMS做二次开发时获取附加表字段内容都是通过runphp执行SQL查询获得,最近看了看手册,发现一个非常简便的方法. 用arclist调用于附加表字段的方法: 方法一: 要获取附加表 ...
- Intellij IDEA +genymotion安装配置
Intellij IDEA是一款非常好用的java编辑器,比Eclipse的代码提示要友善的多,优缺点不多讲了. 下面讲如何安装配置. 1)如官网下载最新版本 http://www.jetbrains ...
- C#入门--字段与属性
C#入门--字段与属性 “字段”,它是包含在类或结构中的对象或值.字段使类和结构可以封装数据. 属性是这样的成员:它们提供灵活的机制来读取.编写或计算私有字段的值.可以像使用公共数据成员一样使用属性, ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- Android setUserVisibleHint-- fragment真正的onResume和onPause方法
这个情况仅适合与多个fragment之间切换时统计,而非activity和fragment同时交互,因当时项目为首页4个fargment时长统计,因此适合,经下面网友评论指出,特在这里写出此问题,因最 ...
- MyBatis中sql语句
一.select <!-- 查询学生,根据id --> <select id="getStudent" parameterType="String&qu ...
- 监控系统-mod-gearman
doc http://labs.consol.de/nagios/mod-gearman/ 安装 yum -y install gearmand-server-0.33-2.rhel6.x86_64. ...
- Lucene学习入门——核心类API
本文讲解Lucene中,创建索引.搜索等常用到的类API 搜索操作比索引操作重要的多,因为索引文件只被创建一次,却要被搜索多次. 索引过程的核心类: 执行简单的索引过程需要如下几个类:IndexWri ...