对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = function () { alert("元素已经加载完毕 !"); } /*执行错误*/ </script> </head> <body> <div>click me.</div> </body> </html>
如果这样,还没有等待元素加载完就给 div#panel 绑定了一个事件，浏览器Console中会报错: TypeError:
document.getElementById(...) is null
更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().
把事件绑定放在body里,元素之后:
由于绑定事件在元素之后，所以可以成功获取 div#panel 的元素，并在 div#panel 上绑定点击事件。
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-2</title> </head> <body> <div>click me.</div> <script type="text/javascript"> document.getElementById("panel").onclick = function () { alert("元素已经加载完毕 !"); } /*正确执行*/ </script> </body> </html>
把事件绑定放在window.onload中进行事件绑定:
window.onload 事件的处理函数则在页面所有元素加载完成之后才执行，所以这里给获取元素并绑定事件也是可行的。
<!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-2</title> </head> <body> <div>click me.</div> <script type="text/javascript"> document.getElementById("panel").onclick = function () { alert("元素已经加载完毕 !"); } /*正确执行*/ </script> </body> </html> jQuery的ready()方法传入绑定事件的方法: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-3</title> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ document.getElementById("panel").onclick = function () { alert("元素已经加载完毕 !"); } /*正确执行*/ }); </script> </head> <body> <div>click me.</div> </body> </html>
jQuery $(document).ready()和window.onload
根据ready()方法的API说明。
这个方法接收一个function类型的参数ready(handler), 方法的作用是: Specify a function to execute when the DOM is fully loaded.即当DOM加载完毕的时候,执行这个指定的方法.因为只有document的状态ready之后,对元素的操作才是安全的. $(document).ready() 仅在DOM准备好的时候执行一次,但可以多次绑定 ready 事件。
与ready相比,load事件会等到页面渲染完成执行,即等到所有的资源(比如图片)都完全加载完成的时候才会执行。 $(window).load(function(){…}) 会等整个页面,不仅仅是DOM,还包括图像和iframes都准备好之后,再执行.而ready()是在DOM准备好之后就执行了,即DOM树建立完成的时候.所以通常ready()是一个更好的时机.
如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行.
注意:ready()方法多次调用,传入的handler方法会串联执行(追加).而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.
$(document).ready()的三种简写
$( document ).ready(handler)
$().ready(handler)//(this is not recommended)
$(handler)
window对象和document对象
Window对象表示浏览器中打开的窗口:
Document对象表示载入浏览器的HTML文档:
Event对象
Event 即事件,代表了各种状态:
事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.文中关注的onload就是其中一个事件.
onload事件
onload 事件:
onload 事件是在加载完成后立即发生.(注意其中的l是小写).
支持该事件的标签是: <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
支持该事件的JavaScript对象是: image, layer, window .注意这里并没有 document .
onload使用解析
最常用的就是 window.onload , 会等到整个页面及各种资源都加载完成之后再执行后面赋值的 function 行为.另外,可以在标签中使用 onload ,比如:
<body>
其中 inlineBodyOnloadTimeCounter() 是一个自定义的JavaScript function.
注意 jQuery ready() 的API文档中有这么一段: