window常见事件onload
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的更多相关文章
- window常见事件
<script type="text/javascript"> /*onunload = function(){ alert("onunload run&qu ...
- DOM笔记（五）：JavaScript的常见事件和Ajax小结
一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...
- JavaScript的常见事件和Ajax小结
一.常见事件类型 1.鼠标事件 事件名称 说明 onclick 鼠标单击时触发 ondbclick 鼠标双击时触发 onmousedown 鼠标左键按下时触发 onmouseup 鼠标释放时触发 on ...
- 基于window.onerror事件 建立前端错误日志
QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug. try&catch是一个捕获前端错误的常见方法,比如: { //给 ...
- JQuery 在$(window).load() 事件中 不运行 $(window).resize()
本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题 :J ...
- 【JavaScript】案例三：使用JS完成页面定时弹出广告——事件(onload)
事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...
- [译]window.onerror事件
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- window.onresize事件在vue项目中的应用
//vue页面<template> <div id='echart'> 报表 </div> </template> <script> exp ...
- window.onresize 事件笔记
1.浏览器尺寸变化响应事件 : window.onresize = function(){....} 这里须要注意的是,onresize响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...
随机推荐
- JavaScript疑难杂症系列-事件
事件这块知识点虽然是老生长谈的,但对于我来说多多整理,多多感悟,温故知新,每次看看这块都有不同的收获.(在这里我不会长篇大论,只会挑重点;具体的小伙伴们自行查找) 什么是事件 在编程时系统内发生的动作 ...
- C++入门经典-例6.3-字符串之未使用字符串结束符“\0”和使用字符串结束符“\0”的区别
1:为字符串数组赋值的方式有两种,即数组元素逐一赋值和使用聚合方式赋值. 为数组元素逐一赋值.例如: pWord[0]='H'; 使用聚合方式赋值如: char pWord[]={'H','E','L ...
- Consul zookeeper etcd eureka
这里就平时经常用到的服务发现的产品进行下特性的对比,首先看下结论: Feature Consul zookeeper etcd eureka 服务健康检查 服务状态,内存,硬盘等 (弱)长连接,kee ...
- 第九周总结&实验报告七
小结:这周请了一天的假,所以回来的时候有些知识点跟不上,不过在第二节课学到了关于IO的知识很重要,对于这次的实验也有些吃力,这周的知识点主要集中在书上,在各种不同条件下学习运用什么样的代码. 一. ...
- scrum例会报告+燃尽图01
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9954 一.小组情况 组长:贺敬文组员:彭思雨 王志文 位军营 徐丽君队名 ...
- Golang协程实现流量统计系统（3）
进程.线程.协程 - 进程:太重 - 线程:上下文切换开销太大 - 协程:轻量级的线程,简洁的并发模式 Golang协程:goroutine Hello world package main impo ...
- [论文理解] Receptive Field Block Net for Accurate and Fast Object Detection
Receptive Field Block Net for Accurate and Fast Object Detection 简介 本文在SSD基础上提出了RFB Module,利用神经科学的先验 ...
- 【转】C++ const成员变量和成员函数（常成员函数）
转:http://c.biancheng.net/view/2230.html 在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量和成员函数. co ...
- leetcode 121买卖股票的最佳时机I
从下标1开始,维护两个变量,一个是0~i-1中的最低价格low,一个是当前的最高利润res;先更新最高利润,在更新最低价格:应用了贪心算法的基本思想,总是选择买入价格最低的股票,代码如下: 具有最优子 ...
- django-登录页面添加验证码
1,安装第三方库 pip install django-simple-captcha 2,注册应用 INSTALLED_APPS = [ 'django.contrib.admin', 'django ...