在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( ) :添加监听事件;
第一个参数写事件:比如 click 点击事件 等等;
第二个参数写处理函数:触发了这个事件之后我们要做些什么;
第三个参数写true 或者 false: true代表是捕获型,false代表是冒泡型,一般是冒泡型;
比如:("click" , say , false) 就给我们的 div 元素添加了点击的监听事件,
一旦点击div ,那么我们就执行 say 这个函数;
最后一个参数涉及到了事件的捕获和冒泡,下一篇详述;