JavaScript DOMContentLoaded事件

在DOMContentLoaded事件发生之前，不需要等待样式表、图形或子框架加载完成，主要的HTML内容加载和处理完成后就会触发。这个事件在JavaScript中是不可取消的和通用的。

当将JavaScript放在页面的头部并在body中引用元素时，我们必须处理DOMContentLoaded事件。当页面完全加载时，应该调用一个名为load的不同事件。当DOMContentLoaded更加适用时，错误地使用load是常见的一个错误。

语法

像addEventListener()这样的DOMContentLoaded事件方法使用事件名和id或类名。这种方法是设置事件处理程序属性的另一个选择。

当DOM内容加载时，将执行以下代码：

<script>
document.addEventListener('DOMContentLoaded', () => {
let event_operation = document.getElementById('id_name');
event_operation.addEventListener('click', () => {
//handle DOMContentLoaded event
});
});
</script>

示例

DOMContentLoaded事件示例展示了如何在javascript中处理该事件。

示例1 ：基本的DOMContentLoaded事件示例展示了事件处理程序数据。每次运行页面时，DOMContentLoaded事件都会带着事件加载页面。这是一个带有javascript属性的基本事件。

<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOMContentLoaded event fully loaded');
// handle the DOMContentLoaded event
document.getElementById("output_data").innerHTML = "DOMContentLoaded event fully loaded";
});
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<p id = "output_data" style = "color:orange;">  </p>
</body>
</html>

输出

下面的图片显示了DOMContentLoaded事件的输出。

JavaScript DOMContentLoaded事件

示例2 : 基本的DOMContentLoaded事件示例演示了带有数据的点击事件处理程序。

每次我们点击页面上的按钮时，DOMContentLoaded事件将加载具有事件的页面。这是一个带有JavaScript属性的按钮点击事件。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn_var = document.getElementById('btn_var');
btn_var.addEventListener('click', () => {
// handle the DOMContentLoaded click event  
document.getElementById("output_data").innerHTML = "DOMContentLoaded click event";
});
});
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<button id = "btn_var"> Click Here! </button>
<p id = "output_data" style = "color:orange;">  </p>
</body>
</html>

输出

下图展示了DOMContentLoaded事件的输出。

JavaScript DOMContentLoaded事件

示例3 ：基本的DOMContentLoaded事件示例显示了带有数据的点击事件处理程序。

每次我们点击按钮时，DOMContentLoaded事件在几秒钟后或给定的时间后加载页面。此按钮点击事件与javascript中的”for”函数属性配合使用。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let btn_var = document.getElementById('btn_var');
btn_var.addEventListener('click', () => {
let dom;
for( dom = 0; dom < 90000000; dom++)
{}
// handle the DOMContentLoaded click event  
document.getElementById("output_data").innerHTML = "DOMContentLoaded click event loaded after few time : " +dom;
});
});
</script>
</head>
<body>
<p> JavaScript DOMContentLoaded Event </p>
<button id = "btn_var"> Click Here! </button>
<p id = "output_data" style = "color:orange;">  </p>
</body>
</html>

输出

以下图片显示了DOMContentLoaded事件的输出。

JavaScript DOMContentLoaded事件

示例4 ：基本的DOMContentLoaded事件示例展示了带有数据的点击事件处理程序。

每次我们点击页面上的按钮时，DOMContentLoaded事件都会加载带有事件的页面。这是一个针对DOMContentLoaded事件工作的带有数据的javascript函数。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DOMContentLoaded Event </title>
<script>
function doworking() {
  console.info('DOMContentLoaded loads page');
  document.getElementById("output_data").innerHTML = "DOMContentLoaded loads page";
}
if (document.readyState === 'loading') { 
document.addEventListener('DOMContentLoaded', doworking);
 } else {  
// `DOMContentLoaded`leredy working event 
  doworking();
}
</script>
</head>
<body>
 JavaScript DOMContentLoaded Event 
<p id = "output_data" style = "color:orange;">  </p>
</body>
</html>

输出

下面的图像显示了DOMContentLoaded事件的输出结果。

JavaScript DOMContentLoaded事件