zoukankan      html  css  js  c++  java
  • 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。

    2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。

    我们需要给一些元素的事件绑定处理函数。但问题是,如果那个元素还没有加载到页面上,但是绑定事件已经执行完了,是没有效果的。

    这两个事件大致就是用来避免这样一种情况,将绑定的函数放在这两个事件的回调中,保证能在页面的某些元素加载完毕之后再绑定事件的函数。

    DOM文档加载的步骤为

    1. 解析HTML结构。
    2. 加载外部脚本和样式表文件。
    3. 解析并执行脚本代码。
    4. DOM树构建完成。//DOMContentLoaded
    5. 加载图片等外部文件。
    6. 页面加载完毕。//load

    在第4步,会触发DOMContentLoaded事件。在第6步,触发load事件。
    在没有出现DOMContentLoaded事件出现以前,许多类库中都有模拟这个事件的方法,比如jQuery中著名的 $(document).ready(function(){}); 。

    1 // 不兼容老的浏览器
    2 document.addEventListener("DOMContentLoaded", function() {
    3    // ...代码...
    4 }, false);
    5 
    6 window.addEventListener("load", function() {
    7     // ...代码...
    8 }, false);



     
  • 相关阅读:
    Thinkphp随堂笔记【模型初步上】
    Thinkphp随堂笔记【MVC模式和URl访问的四种方式】
    C# set get 个人学习笔记
    关于文件的操作r、r+、w、w+
    HTTPS的通信步骤02
    HTTPS的通信步骤01
    python六剑客之reduce()函数
    python六剑客之filter()函数
    python六剑客之map()函数
    TCP/IP四层模型
  • 原文地址:https://www.cnblogs.com/exhuasted/p/6169049.html
Copyright © 2011-2022 走看看