为何JavaScript代码需window.addEventListener("load", start)？求事件监听器详解

一、事件监听器到底是啥？ #

简单说，事件监听器就是给某个对象（这里是浏览器的window对象）绑定一个"触发规则"：你告诉它「等XX事件发生时，就去执行XX函数」。当对应的事件真的发生了，浏览器就会自动调用你指定的函数。

二、这行代码里的参数啥意思？ #

• 第一个参数"load"：指定要监听的事件——window的load事件，这个事件会在整个页面（包括图片、样式表、脚本等所有资源）完全加载完成的时候触发。
• 第二个参数start：是你写的那个函数的名字。注意这里不要加括号()，加括号的话会立刻执行start函数，而不是等load事件触发再执行。

三、为啥不加这行代码就跑不起来？ #

你的start函数最后要执行document.getElementById("output1").innerHTML = res;——这行是要找到页面上的output1元素，然后把计算结果塞进去。

如果没有这行监听代码，浏览器会在页面还没加载完的时候就执行start函数，这时候页面上的output1元素还没被浏览器创建出来，document.getElementById("output1")会拿到null，自然没法给它设置内容，代码直接报错。

加了window.addEventListener("load", start)之后，start函数会等到整个页面所有元素都加载好、能被找到的时候才执行，这时候就能正常操作output1元素了。

补充：还有别的解决办法吗？ #

把你的JS脚本标签放在HTML的</body>结束标签之前，浏览器会先加载完所有页面元素再执行JS代码，也能达到同样的效果，但window.addEventListener("load")是不依赖脚本位置的通用写法。

内容的提问来源于stack exchange，提问作者Renad Hamad