load和onload的区别

load和onload事件用于监听文档或资源加载完成,onload通常绑定到元素如图片,而load可绑定到文档或window。当文档及所有资源加载完毕,这两个事件会被触发。然而,为了更精确地响应文档结构加载完成,开发者常使用DOMContentLoaded事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

load 和 onload 都是指文档或资源加载完成后触发的事件,但是它们的使用方式略有不同

onload 事件只能绑定到某个特定的元素上,例如图片元素,而 load 事件则可以绑定到整个文档或 window 对象上。

onload 是一种事件属性,可以直接在 JavaScript 代码中使用。例如:

window.onload = function() {
  // 执行一些操作
}

在这个例子中,当文档及其所有资源都加载完成时,window.onload 事件会触发,从而执行函数中的代码。

对于 load 事件来说,它可以绑定到整个文档或 window 对象上:

document.addEventListener('load', function() {
  // 文档及其所有资源都已加载完成
});

这里的 load 事件绑定到了 document 对象上,表示当整个文档及其所有资源都已加载完成时触发该事件。
同时,也可以将 load 事件绑定到 window 对象上,例如:

window.addEventListener('load', function() {
  // 文档及其所有资源都已加载完成
});

这里的 load 事件绑定到了 window 对象上,表示当整个文档及其所有资源都已加载完成时触发该事件。

需要注意的是,使用 load 事件绑定到整个文档或 window 对象上时,需要确保所有资源都已加载完成。如果存在某些资源尚未加载完成,那么 load 事件可能不会被触发。因此,在实际开发中,我们更倾向于使用 DOMContentLoaded 事件来绑定需要在文档加载完成后执行的 JavaScript 代码。

### JavaScript `onload` `appendChild` 的执行顺序 当处理页面加载事件 (`onload`) 及动态添加子节点 (`appendChild`) 时,理解两者之间的交互至关重要。 #### 页面完全加载后再附加元素 为了确保脚本能够访问到完整的 DOM 结构,在图像其他资源都已加载完毕之后才调用 `appendChild` 是一种常见做法。此时可以利用窗口的 `load` 事件来实现这一点[^1]: ```javascript window.addEventListener('load', function () { const newElement = document.createElement('div'); newElement.textContent = 'This is a new div'; // 将新创建的元素追加到 body 下面 document.body.appendChild(newElement); }); ``` 上述代码片段展示了如何等待整个页面完成加载后通过监听器的方式向文档主体中添加新的 HTML 元素。 #### 动态插入并立即操作新增内容 如果希望在某些特定条件下即时显示或隐藏刚被加入的内容,则可以在 `DOMContentLoaded` 事件触发后立刻使用 `appendChild` 方法。这允许开发者更早地操纵DOM而无需等到所有的外部资源都被下载下来[^2]: ```javascript document.addEventListener('DOMContentLoaded', (event) => { let img = new Image(); img.src = "example.jpg"; // 创建一个新的容器用于放置图片 const container = document.createElement('div'); container.id = "image-container"; // 把这个容器添加进body里 document.body.appendChild(container); // 设置图片载入后的回调函数 img.onload = function(){ // 图片已经成功加载,现在把它放进之前准备好的container里面去 container.appendChild(img); console.log("Image has been loaded and appended."); }; }); ``` 这段例子说明了即使是在页面的主要结构准备好以后也可以安全地继续构建界面组件,并且可以通过设置合适的事件处理器保证这些动作按照期望发生。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值