1, window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数

下面的代码，当点击按钮，并不会弹出对话框，因为页面还没有加载到按钮元素，无法执行 js 点击事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var btn=document.querySelector("button");

        btn.onclick=function(){

            alert("点击了");

        }

    </script>

</head>

<body>

<button>点击</button>

</body>

</html>

处理办法是：

window.onload = function() {

            var btn = document.querySelector('button');

            btn.addEventListener('click', function() {

                alert('点击我');

            })

        }

2，window.onload传统注册事件方式，只能写一次，如果有多个，会以最后一个window.onload为准

下面的代码，页面一加载，就会弹出“22", 然后再点击按钮，不能执行点击事件，无法弹出”点击我“

 window.onload = function() {

            var btn = document.querySelector('button');

            btn.addEventListener('click', function() {

                alert('点击我');

            })

        }

        window.onload = function() {

            alert();

        }

解决方法：如果使用addEventListener 则没有限制

window.addEventListener('load' ,function(){

     var btn=document.querySelector("button");

     btn.onclick=function(){

         alert("点击");

     }

})

window.addEventListener('load' , function(){

     alert("");

})

页面一加载，弹出”22“后，再点击按钮，又会弹出”点击“。

3，窗口加载事件：document.addEventListener( ' DOMContentLoaded ' ,  function(){})

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。（IE9以上才支持）

如果页面的图片很多的话，从用户访问到 onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适。

window常见事件onload的更多相关文章

  1. window常见事件

    <script type="text/javascript"> /*onunload = function(){ alert("onunload run&qu ...

  2. DOM笔记（五）：JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  3. JavaScript的常见事件和Ajax小结

    一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...

  4. 基于window.onerror事件 建立前端错误日志

    QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...

  5. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  6. 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)

     事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...

  7. [译]window.onerror事件

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  8. window.onresize事件在vue项目中的应用

    //vue页面<template> <div id='echart'> 报表 </div> </template> <script> exp ...

  9. window.onresize 事件笔记

     1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里须要注意的是,onresize响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...

随机推荐

  1. leetcode 17电话号码的字母组合

    与子集70?类似,子集每次两个分支,本题每次k个分支,子集是第一次不push第二次push元素,本题是每次都push元素,因此,本题答案的长度都为k,子集题目为各种组合: /** res,level, ...

  2. Icon 图标

    Icon 图标 提供了一套常用的图标集合. ¶使用方法 直接通过设置类名为 el-icon-iconName 来使用即可.例如: <i class="el-icon-edit" ...

  3. MongoDB简单查询语句<平时使用语录，持续更新>

    MongoDB查询语句 --查询近三个月的客户使用量  aggregate:使用聚合  match:过滤  group分组   -- mysql中select org_code as 近三个月使用商户 ...

  4. 阶段3 2.Spring_07.银行转账案例_7 代理的分析

    新建项目 实现动态代理. 动态代理的概念 买电脑找代理商 代理的出现 解决了生产厂家的一些问题 需要java中的动态代理机制

  5. 十：jinja2模板查找路径

    jinja2用于渲染模板 查找路径 1.默认从项目根目录下的templates下面找指定的html文件 也可以往下新建路径 2.指定自定义路径 在Flask的源码中,指定了默认路径为templates ...

  6. django QueryDict 类型

    如果没有值,返回默认值的写法 允许有多个同名的值,但是需要用getlist 访问. 如果用常规的访问只能访问到最后一个值.

  7. windows vs2015 编译openssl 1.1.0c

    1,到openssl官网下载源码. 2,安装activePerl,我放在网盘:https://pan.baidu.com/s/1ZHe24yRcPtIuSiEa-3oqxw 3.安装完毕后,使用 VS ...

  8. VS2013配置curl

    http://blog.csdn.net/totodum/article/details/51059380 安装完成之后,要注意url的传值, curl中需要传char*

  9. LeetCode.944-删除列保证排序(Delete Columns to Make Sorted)

    这是悦乐书的第362次更新,第389篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第224题(顺位题号是944).我们给出了一个N个小写字母串的数组A,它们的长度都相同. ...

  10. LeetCode.12-整数转罗马数字符串(Integer to Roman)

    这是悦乐书的第351次更新,第376篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Medium级别的第6题(顺位题号是12).罗马数字由七个不同的符号表示:I,V,X,L,C,D和M. ...