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 ...
随机推荐
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
bootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件. <!DOCTYPE HTML> <html> <h ...
- 当前activity透明度的获取与修改
WindowManager.LayoutParams lp = getWindow().getAttributes();//layoutparams是静态类不能通过new来完成. lp.alpha = ...
- Spring boot-(3) Spring Boot特性1
本节将深入Spring Boot的细节,可以学到你想使用的或定制的Spring Boot的主要特性. 1. SpringApplication SpringApplication类为引导一个Sprin ...
- attr()与setAttribute()的区别
先看红色标注的: 这里传过来的this是个元素节点,因此currentTr也得用获取节点的方式parentNode去获取,而不能写parent(),这是第一个需要注意的地方. 第二个问题,就是怎么给c ...
- XtraReport三动态数据绑定
代码还用上一节的,把Report的Datasource去掉.各个绑定的字段也去掉,有了第二节的基础,现在看这个就不难了,无非就是传到report一个数据集,在把这个数据集绑定到各控件里 清空detai ...
- 《Head First 设计模式》之状态模式——糖果机
状态模式(State) ——允许对象在内部状态时改变它的行为,对象看起来好像修改了它的类. 策略模式与状态模式的区别 状态主体(拥有者)持有状态对象,运行时可以通过动态指定状态对象来改变类的行为 策略 ...
- UITableView分隔线
问题1: 在ios中使用UITableView时,当行数较少是,可能一屏幕能显示完全所有行,这时候会出现下面的问题,显示多余的分隔线 图如下: 解决方案: //解决方案1 //添加如下代码 -(CGF ...
- MySQL之my.cnf配置
####################配置文件开始################### # For advice on how to change settings please see # ht ...
- h5:erver-Sent Events
对于一般的 Web 应用开发,大多数开发人员并不陌生.在 Web 应用中,浏览器和服务器之间使用的是请求 / 响应的交互模式.浏览器发出请求,服务器根据收到的请求来生成相应的响应.浏览器再对收到的响应 ...
- Visual Studio无法推送提交到Github的解决方法
前言 当出现Visual Studio推送变更失败时,卸载系统中所有Git以及Visual Studio 的Git工具再重装即可 前情概要 今天由于要尝试使用RabbitMQ,所以打算先在本地做些小D ...