问题:写了一个最简单的页面。在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() {} 里面的函数不执行的更多相关文章

  1. JavaScript向window onload添加加载函数

    有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...

  2. javascript window.onload 加载多个函数的方法

    用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或 ...

  3. JavaScript window.onload 事件和 jQuery ready 函数有何不同?

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  4. js常见执行方法window.onload = function (){},$(document).ready()

    1. window.onload = function(){}; 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发. 2. $(document).ready();当web页面以及 ...

  5. JQUERY的$(function(){})和window.onload=function(){}的区别

    在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...

  6. JQUERY的$(function(){})和window.onload=function(){}的区别【转】

    在Jquery里面,我们知道入口函数有两种写法:$(function(){}) 和$(document).ready(function(){}) 作用类似于传统JavaScript中的window.o ...

  7. window.onload 添加多个函数绑定

    window.onload = function(){alert(2)} function addEvent (fun) { var old = window.onload; if(typeof ol ...

  8. 页面加载之window.onload=function(){} 和 $(function(){})的区别

    通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...

  9. jQuery $(document).ready()和JavaScript window.onload()事件的区别

    一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...

随机推荐

  1. 性能测试工具LoadRunner19-LR之Controller IP欺骗

    概念 IP地址欺骗是指用户操作产生的IP数据包为伪造的源IP地址,以便冒充其他系统或发件人的身份.这是一种黑客的攻击形式,黑客使用一台计算机上网,而借用另外一台机器的IP地址,从而冒充另外一台机器与服 ...

  2. stm32 输入捕获学习(二)

    (本文参考STM32  开发指南 V1.3   -- ALIENTEK 战舰 STM32 开发板库函数教程 ) 1. 实验设计 我们用 TIM5 的通道 1(PA0)来做输入捕获,捕获 PA0 上高电 ...

  3. linux工具:快速返回某级父目录--bd

    当我们在linux服务器上切换父目录时,通常使用cd ../../,有几级目录就输入几次"../",如果目录嵌套的过深,就会有点晕菜...因此,本次介绍的这款工具,可以快速的返回指 ...

  4. $.get和$.post实例

    get和post用法一样,我只写个$.get的. [HTML] <input type="text" id="myFishName" name=" ...

  5. gdb调试汇总

    1. 启动GDB开始调试: (1)gdb program ///最常用的用gdb启动程序,开始调试的方式(2)gdb program core ///用gdb查看core dump文件,跟踪程序cor ...

  6. 关于hibernate字段映射@colunm出现的问题以及jpa驼峰大写转_小写的问题探究

    关于hibernate字段映射@colunm出现的问题以及jpa驼峰大写转_小写的问题探究2018年04月24日 15:47:26 守望dfdfdf 阅读数:735 标签: @colunmhibern ...

  7. Java中mouseDragged有效mouseMoved没响应的可能原因

    1.这个问题在jdk7与jdk8上都会出现. 2.具体表现为: 单独写个测试例子,用JFrame实现了mouseMoved接口,mouseDragged和mouseMoved都输出方法名和坐标,结果是 ...

  8. Javascript打印金字塔,倒立金字塔,空心金字塔,菱形,空心菱形等

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 解决Wamp各版本中 Apache 文件列表图标无法显示

    Edit the following file manually and change the path to the icons folder (it appears times in the fi ...

  10. POJ-3274 Gold Balanced Lineup---hash经典题!

    题目链接: https://vjudge.net/problem/POJ-3274 题目大意: 给定多头牛的属性,每头牛的属性由一个非负数表示,该数的二进制表示不会超过K位,它的二进制表示的每一位若为 ...