在前端开发中，我们经常需要在页面加载完成后执行一些操作。为了实现这个目标，我们通常使用 onload 事件或 addEventListener 方法来注册一个 load 事件监听器。在本文中，我们将对它们进行比较，并分析它们的不同之处。
element.onload
onload 事件是 DOM 元素上的一个属性，可以用来指定一个函数，当元素加载完成时就会调用该函数。例如：
<img src="image.png" onload="console.log('Image loaded!')">当图像加载完成后，控制台将输出 "Image loaded!"。
使用 onload 的主要优点是它很简单，只需要指定一个函数即可。但是，它有一个重要的缺点：如果我们指定的函数多次被注册到同一个元素上，只有最后一个函数才会被调用。这意味着，如果我们在代码中多次设置 onload，只有最后一个设置的函数将被执行。
element.addEventListener("load", callback, false)
addEventListener 方法是 DOM 元素上的一个方法，可以用来注册事件监听器。与 onload 相比，addEventListener 更加灵活，因为它可以注册多个监听器，并且它支持事件冒泡和捕获。
下面是一个例子，演示如何使用 addEventListener 注册一个 load 事件监听器：
<img id="my-image" src="image.png">
<script>
const img = document.querySelector('#my-image');
img.addEventListener('load', () => {
console.log('Image loaded!');
});
</script>当图像加载完成后，控制台将输出 "Image loaded!"。
与 onload 不同的是，addEventListener 可以在多个元素上注册相同的监听器，并且所有监听器都会被调用。此外，addEventListener 还支持事件冒泡和捕获，这意味着你可以在父级元素上注册一个监听器来处理子元素的事件。
总结
在选择使用 onload 还是 addEventListener 时，我们需要根据具体情况进行考虑。如果我们只需要为一个元素注册一个监听器，并且不需要支持事件冒泡或捕获，那么使用 onload 是一个简单而有效的解决方案。但是，如果我们需要在多个元素上注册相同的监听器，并且需要支持事件冒泡或捕获，那么使用 addEventListener 就更加合适。
无论使用哪种方法，我们都应该注意避免在同一元素上注册多个相同类型的事件监听器，因为这可能会导致预期之外的行为发生。
示例代码
以下是一个例子，演示如何同时使用 onload 和 addEventListener 注册一个 load 事件监听器：
<img id="my-image" src="image.png" onload="console.log('Image loaded with onload!')">
<script>
const img = document.querySelector('#my-image');
img.addEventListener('load', () => {
console.log('Image loaded with addEventListener!');
});
</script>当图像加载完成后，控制台将输出 "Image loaded with onload!" 和 "Image loaded with addEventListener!"。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28313