JavaScript: window.onload = function() {} 里面的函数不执行

程序员文章站 2022-04-11 20:59:09

问题：写了一个最简单的页面。在script标签中使用的 window.onload = function() { function add() { //... } } 页面上：

但是，函数不仅没有触发，同时控制台报错：add() is not d ......

问题：写了一个最简单的页面。在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的分享