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(22); } ? ? ? 解决方法:如果使用addEventListener 则没有限制 window.addEventListener(‘load‘,function(){ var btn=document.querySelector("button"); btn.onclick=function(){ alert("点击"); } }) window.addEventListener(‘load‘,function(){ alert("22"); }) ? ? ? ?页面一加载,弹出”22“后,再点击按钮,又会弹出”点击“。 3,窗口加载事件:document.addEventListener( ‘ DOMContentLoaded ‘,? function(){}) ? ? ? DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。(IE9以上才支持) ? ? ? 如果页面的图片很多的话,从用户访问到 onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户体验,此时用DOMContentLoaded事件比较合适。 (编辑:ASP站长网) |