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响应事件处理中.获取到的页面尺寸參数是变更后的參数. // ...
随机推荐
- 一次高IO下的GC分析之旅
一次高IO下的GC分析之旅 编码前线 关注 2018.12.21 00:06 字数 597 阅读 45评论 0喜欢 0 起因:收到GC STW报警 [监控系统]Total time for which ...
- git 指定自己的sshkey
在服务器上生成ssh-key以后,需要把公钥放在github上,但是,这个公钥只能放在一个账户里,如果放在第二个账户里,就会提示这个key已经被用了,这是前提 一个可能的场景是这样的: 你们公司有好几 ...
- 10、kubernetes之RBAC认证
一.kubectl proxy # kubectl proxy --port=8080 # curl http://localhost:8080/api/v1/ # curl http://local ...
- web基础知识汇总
HTML&XML 1.JavaWeb的概述 A: 什么是Web----->就是网页或者网站 B: 什么是JavaWeb----->就是使用java语言做web C: 浏览器访问网站 ...
- 使用zipkin2在SpringCloud2.0环境下追踪服务调用情况
1.目的: 使用zipkin2.0在Spring Cloud 2.0环境下,追踪服务调用情况. 2.所需组件: zipkin2.0,Spring Cloud 2.0,Eureka Server,Eur ...
- windows触摸板速度调整
Windows 触摸板滚动速度调整: 在注册表中: The magic key is: Computer\HKEY_CURRENT_USER\Software\Microsoft\Wisp\Tou ...
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_1 ioc的概念和作用
IOC的含义 new的方式创建对象,是主动去找对象.对我的资源独立就变的很难,因为这有明显的依赖关系 第二种方式创建对象.app断开了和资源的联系,.而是去找工厂要一个资源.由工厂负责和资源去的联系, ...
- 关于springmvc的一些注解详解
引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为applicatio ...
- shell命令find删除修改后带尾巴的重复的文件
命令:find . -name "*~" -delete 说明:在linux中 点号(.)表示当前目录,连续的连个点号(..)表示父级目录 作用:在linux中,我经常会遇到这样的 ...
- 关系/对象映射 多对多关系(@ManyToMany 注释)【重新认识】
old: @ManyToMany 注释:表示此类是多对多关系的一边, mappedBy 属性定义了此类为双向关系的维护端, 注意:mappedBy 属性的值为此关系的另一端的属性名. 例如,在Stud ...