DOMContentLoaded 事件

港控/mmm° 2022-05-27 00:36 124阅读 0赞

在javascript 中，DOMContentLoaded 事件是文档加载完成时触发的事件，文档加载完成是指DOM结构

加载完成，不用考虑其它资源，比如图片等；

我们来看一个例子：

<!DOCTYPE html>

< html>

< head>

< meta charset= "utf-8" >

< meta name= "newbean" />

< title > DOMContentLoaded 事件 </ title >

</ head>

< body>

< script >

*// 定义say函数，控制台输出下面的文本*

**function**  say ()\{

console . log ( "文档结构加载完毕！" );

\}

*//添加 DOMContentLoaded 事件监听*

window. addEventListener ( "DOMContentLoaded" ,  say );

< / script >

</ body>

</ html>

结果：在整个DOM 结构加载完成之后，触发了DOMContentLoaded事件，

然后执行函数say(), 在控制台输出：文档结构加载完毕！

补充：

addEventListener( ) 可以为我们添加监听事件；

obj.addEventListener("第一个参数写事件","第二个参数写函数","第三个参数规定是否是捕获型");

obj 是我们添加的对象，给谁添加监听事件；

addEventListener( ) ：添加监听事件；

第一个参数写事件：比如 click 点击事件   等等；

第二个参数写处理函数：触发了这个事件之后我们要做些什么；

第三个参数写true 或者 false： true代表是捕获型，false代表是冒泡型，一般是冒泡型；

比如：div.addEventListener("click" , say , false) 就给我们的 div 元素添加了点击的监听事件，

一旦点击div ，那么我们就执行 say 这个函数；

最后一个参数涉及到了事件的捕获和冒泡，下一篇详述；

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关「深入探究Web页面生命周期：DOMContentLoaded、load、beforeunload和unload事件」

页面生命周期的四个重要事件：DOMContentLoaded、load、beforeunload 和 unload，定义了页面从加载到卸载的不同阶段。这些事件可以帮助我们...

我就是我/ 2024年04月25日 20:14/ 0 赞/ 63 阅读

相关【JQuery_事件】事件_语法_键盘事件_鼠标事件_

0.事件 0.0 事件四要素 1. 事件源 2. 事件绑定处理函数 3. 查找修改元素 4. 修改元素 0.0.0事件源 document

ゞ浴缸里的玫瑰/ 2024年04月03日 10:16/ 0 赞/ 71 阅读

相关监听iframe中的DOMContentLoaded事件

是不可以的… 虽然可以获得iframe的document对象 var frameDoc = document.getElementById('iframeViewP

系统管理员/ 2022年12月31日 11:27/ 0 赞/ 163 阅读

相关 DOMContentLoaded

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten

素颜马尾好姑娘i/ 2022年06月16日 23:26/ 0 赞/ 104 阅读

相关 DOMContentLoaded 事件

在javascript 中，DOMContentLoaded 事件是文档加载完成时触发的事件，文档加载完成是指DOM结构加载完成，不用考虑其它资源，比如图片等；我们来看

港控/mmm°/ 2022年05月27日 00:36/ 0 赞/ 125 阅读

相关 JavaScript - DOMContentLoaded和Load的差异

转载博客:[大佬 ORZ][ORZ] DOMContentLoaded顾名思义，就是dom内容加载完毕。页面绘制的过程：当输入一个URL，页面的展示首先是空白的，然后过一

谁践踏了优雅/ 2022年05月16日 01:12/ 0 赞/ 109 阅读

相关页面生命周期：DOMContentLoaded, load, beforeunload, unload

页面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：[http://javascript.info/onlo

客官°小女子只卖身不卖艺/ 2022年04月13日 05:40/ 0 赞/ 216 阅读

相关页面生命周期：DOMContentLoaded, load, beforeunload, unload

HTML页面的生命周期有以下三个重要事件： `DOMContentLoaded` —— 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是和样式表等外部资源

灰太狼/ 2022年03月15日 08:28/ 0 赞/ 406 阅读

相关各种事件（html事件，鼠标事件，键盘事件，焦点事件以及阻止默认事件）

HTML事件 onload 事件页面或图片加载完成后执行只有图片和页面可以执行 window.οnlοad=function(){ //整个

短命女/ 2021年10月24日 03:24/ 0 赞/ 537 阅读

相关 DOMContentLoaded 事件

DOMContentLoaded 事件 DOMContentLoaded 事件会在文档完全加载和解析之后触发，无需等待CSS文件、图片和子框架加载完毕。看到上述对事件的...

红太狼/ 2020年05月27日 13:41/ 0 赞/ 812 阅读