对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
<!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 id="panel">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 id="panel">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 id="panel">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="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>$(document).ready(function(){document.getElementById("panel").onclick = function () {alert("元素已经加载完毕 !");}/*正确执行*/});</script></head><body><div id="panel">click me.</div></body></html>jQuery $(document).ready()和window.onload
根据ready()方法的API说明http://api.jquery.com/ready/。
这个方法接收一个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()是一个更好的时机.
新闻热点
疑难解答
图片精选
