`
mr.a
  • 浏览: 94439 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

When is event DOMContentLoaded triggered

阅读更多

When is event DOMContentLoaded triggered?

DOMContentLoaded 何时触发?

 

Once the user agent stops parsing the document, the user agent must run the following steps:

当客户端停止解析文档后, 必须执行以下几步:


1. Set the current document readiness to “interactive” and the insertion point to undefined.

设置当前文档的状态为“inactive” 并设置插入点为 undefined。


Pop all the nodes off the stack of open elements.

 


2. If the list of scripts that will execute when the document has finished parsing is not empty, run these substeps:
2.1 Spin the event loop until the first script in the list of scripts that will execute when the document has finished parsing has its “ready to be parser-executed” flag set and the parser’s Document has no style sheet that is blocking scripts.
2.2 Execute the first script in the list of scripts that will execute when the document has finished parsing.
2.3 Remove the first script element from the list of scripts that will execute when the document has finished parsing (i.e. shift out the first entry in the list).
2.4 If the list of scripts that will execute when the document has finished parsing is still not empty, repeat these substeps again from substep 1.

3. Queue a task to fire a simple event that bubbles named DOMContentLoaded at the Document. 

 

分享到:
评论

相关推荐

    Javascript封装DOMContentLoaded事件实例

    主要介绍了Javascript封装DOMContentLoaded事件实例,DOMContentLoaded是FF,Opera 9的特有的Event, 当所有DOM解析完以后会触发这个事件,需要的朋友可以参考下

    JS兼容所有浏览器的DOMContentLoaded事件

    在标准浏览器中,如Chrome、Firefox、Safari和现代版本的Internet Explorer,可以直接使用`document.addEventListener('DOMContentLoaded', fn, false)`来监听DOMContentLoad事件,并在DOM准备就绪时执行指定的函数`...

    domloaded检查何时加载DOM类似于DOMContentLoaded

    首先,`DOMContentLoaded`事件是网页DOM树构建完成时触发的事件,它不等待外部资源(如图片、脚本、框架)的加载。这意味着当开发者监听这个事件时,可以安全地操作DOM,因为所有元素都已经存在于文档结构中。这对于...

    dom-loaded:检查DOM是否已像DOMContentLoaded一样加载

    加载了dom 检查DOM是否已像一样加载与DOMContentLoaded不同,这在加载DOM之后包含在内时也适用。安装$ npm install dom-loaded用法import domLoaded from 'dom-loaded' ;await domLoaded ;console . log ( 'The DOM ...

    JS、CSS以及img对DOMContentLoaded事件的影响

    《JS、CSS与img对DOMContentLoaded事件的影响》 在前端开发中,理解DOM(Document Object Model)的加载过程至关重要,特别是DOMContentLoaded事件的触发机制。DOMContentLoaded事件是网页加载过程中的一个重要节点...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    document.addEventListener('DOMContentLoaded', function() { var body = document.body; // 针对大部分浏览器 body.addEventListener('mousewheel', handleWheel, false); // 针对Firefox body....

    part2 JS Browser Document Event.pdf

    文档加载完成后会触发`DOMContentLoaded`事件,整个页面完全加载后会触发`load`事件。 ##### 2. 脚本加载 脚本标签的`async`和`defer`属性用于控制脚本的异步加载和执行顺序。 ##### 3. 资源加载事件 资源加载如...

    Background Image Change When Refresh .zip

    标题 "Background Image Change When Refresh" 涉及到的是一个使用JavaScript实现的网页背景图片刷新时自动更换的特性。在游戏开发中,这样的功能可能用于创建动态或随机的视觉效果,提升用户体验。以下是对这个主题...

    关于HTML5+ API plusready的兼容问题

    3. 触发DOMContentLoaded事件 4. 注入5+ API 5. 触发plusready事件 这样导致5+ API生效时间比较延后,在html中引用js执行之后才能调用5+ API,通常采用以下代码调用5+ API: document.addEventListener('plusready'

    TypeError document.getElementById(...) is null错误原因

    `TypeError: document.getElementById(...) is null` 是一个常见的JavaScript错误,通常出现在尝试访问一个尚未加载或者不存在于DOM(文档对象模型)中的元素时。这个错误表示`document.getElementById`方法未能找到...

    jquery中ready()函数执行的时机和window的load事件比较

    jquery的ready()实现的是 DOMContentLoaded 事件,DOMContentLoaded与window load事件的区别...// Handle when the DOM is ready ready: function() { // Make sure that the DOM is not already loaded if ( !jQuer

    html.rar_html javascript_键盘

    document.addEventListener('DOMContentLoaded', function() { document.addEventListener('keydown', function(event) { console.log('按下键:' + event.key); }); document.addEventListener('keyup', ...

    一些主流JS框架中DOMReady事件的实现小结

    window.onload事件是等整个页面完全加载完成后才会触发,这包括所有图片、脚本、样式表、iframe等资源,通常会较晚触发,而DOMContentLoaded仅需DOM树构建完成即可触发,这使得开发者可以在不影响用户体验的情况下,...

    21、HTML事件(二)

    事件对象`event`在事件处理函数中扮演重要角色,它提供了诸如`event.target`(事件触发的元素)、`event.type`(事件类型)和`event.preventDefault()`(阻止默认行为)等属性和方法。此外,还有一些特殊的事件对象...

    TypeError document.getElementById(…) is null错误原因

    这样可以确保脚本在DOM树构建完成后,但在DOMContentLoaded事件触发之前执行。 ```html <script src="yourScript.js" defer></script> ``` #### 3. 使用`<script>`标签的`async`属性 `async`属性使得脚本异步加载...

    浏览器兼容页面开发注意事项(javascript篇)_101028参考.pdf

    12. `body`对象:在IE中,`body`对象可以在`<head>`中访问,其他浏览器则需要等待`DOMContentLoaded`或`window.onload`事件。建议使用事件监听来确保`body`对象可用。 13. `url encoding`:对于URL编码,确保使用`...

Global site tag (gtag.js) - Google Analytics