为何JavaScript中script的.onload与.onerror会同时执行？求解析

核心问题出在函数调用与函数引用的本质区别上，这是JavaScript新手极易踩的坑。

错误代码的问题所在 #

看错误代码中的这两行关键代码：

js.onload = func(null,src);
js.onerror = func(new Error("Error in Script: "),src)

这里你并没有把func函数绑定给事件，而是直接执行了func，并把它的返回值（由于loadedsc1函数没有返回内容，实际是undefined）赋值给了js.onload和js.onerror。

带来的后果是：

• 调用loadScript1的瞬间，func(null,src)和func(new Error(...),src)就已经被执行了两次——这就是你看到"加载错误脚本时onload与onerror同时被调用"的原因，根本不是事件触发，是代码直接调用了两次函数。
• 当脚本后续加载成功或失败时，浏览器试图触发onload/onerror事件，但这两个属性的值是undefined，不会执行任何逻辑。

正确代码的修复逻辑 #

正确代码里的js.onload改成了：

js.onload = function(){func(null,src);}

这里你把一个匿名函数的引用赋值给了js.onload，这个匿名函数不会立刻执行，只有当脚本加载成功时，浏览器才会触发这个匿名函数，进而在内部调用func(null,src)。

注意：你提供的"正确代码"里的js.onerror仍然存在同样的错误，它还是直接执行了func，如果要彻底修复，js.onerror也需要用函数包裹：

js.onerror = function(){func(new Error("Error in Script: "),src);}

更简洁的写法 #

除了匿名函数，还可以用箭头函数简化代码，效果完全一致：

js.onload = () => func(null, src);
js.onerror = () => func(new Error("Error in Script: "), src);

内容的提问来源于stack exchange，提问作者Ankur Dahiya