问题:写了一个最简单的页面。在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. 性能测试工具LoadRunner02-LR简介

    使用LoadRunner的步骤 制定性能测试计划-->开发测试脚本-->设计测试场景-->执行测试场景-->监控测试场景-->分析测试结果 LoadRunner由哪些部件 ...

  2. 在PHP中使用全局变量的几种方法

    简介 即使开发一个新的大型PHP程序,你也不可避免的要使用到全局数据,因为有些数据是需要用到你的代码的不同部分的.一些常见的全局数据有:程序设定类.数据库连接类.用户资料等等.有很多方法能够使这些数据 ...

  3. pat1033. To Fill or Not to Fill (25)

    1033. To Fill or Not to Fill (25) 时间限制 10 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ZHANG, Gu ...

  4. pat05-图2. Saving James Bond - Easy Version (25)

    05-图2. Saving James Bond - Easy Version (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作 ...

  5. 亲测SQLServer的最大连接数

    很多做架构设计.程序开发.运维.技术管理的朋友可能或多或少有这样的困惑: SQLServer到底支持多少连接数的并发? SQLServer是否可以满足现有的应用吗? 现有的技术架构支持多少连接数的并发 ...

  6. btfs

    以下都是举例说明: A. 使用fdisk命令对/dev/sdb进行分区 B. 先对/dev/sdb5和/dev/sdb6进行格式化, 文件系统为btrfs C. 使用btrfs filesystem ...

  7. linux 查看防火墙状态

    1.查看防火墙状态 systemctl status firewalld firewall-cmd --state #查看默认防火墙状态(关闭后显示notrunning,开启后显示running) 2 ...

  8. Django Rest Framework框架源码流程

    在详细说django-rest-framework源码流程之前,先要知道什么是RESTFUL.REST API . RESTFUL是所有Web应用都应该遵守的架构设计指导原则. REST是Repres ...

  9. 3.HTML DOM

    介绍 DOM(Document Object Model)文档对象模型,定义了访问 HTML 和 XML 文档的标准,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. 那显然,HTML DOM ...

  10. python模块详解 shelve

    shelve模块是一个简单的k,v 将内存数据通过文件持久化的模块,可以持久化任何pickle可以支持的python数据.简单的说对 pickle的更上一层的封装. 写文件 import shelve ...