滚动事件与加载事件

滚动事件

事件名:scroll

文档视图或者一个元素在滚动时,会触发元素的scroll事件。

例:

//监听整个页面滚动
window.addEventListener('scroll',function(){})
//给 window 或 document 添加 scroll 事件

监听某个元素的内部滚动直接给某个元素加即可.

加载事件

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件.

事件名:load

当整个页面及所有依赖资源如样式表和图片都已完成加载时,将触发load事件。

它与DOMContentLoaded不同,后者只要页面DOM加载完成就触发,无需等待依赖资源的加载。

例:

//监听页面所有资源加载完毕
window.addEventListener('load',function(){})

注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件

load | MDN

事件名:DOMContentLoaded

document添加

当纯HTML被完全加载以及解析时,DOMContentLoaded 事件会被触发,而不必等待样式表,图片或者子框架完成加载。

//监听页面DOM加载完毕:
//给 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded',function(){})

Document: DOMContentLoaded 事件 | MDN

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注