全面解析jQuery $(document).ready()和JavaScript onload事件

对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:

rush:js;"> <Meta charset="utf-8">

如果这样,还没有等待元素加载完就给 div#panel 绑定了一个事件，

更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().

把事件绑定放在body里,元素之后:

由于绑定事件在元素之后，所以可以成功获取 div#panel 的元素，并在 div#panel 上绑定点击事件。

rush:js;"> <Meta charset="utf-8">

jQuery的ready()方法传入绑定事件的方法: <Meta charset="utf-8">

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()是一个更好的时机.

如果DOM初始化完成之后再调用ready()方法,传入的新的handler将会立即执行.

注意:ready()方法多次调用,传入的handler方法会串联执行(追加).而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

$(document).ready()的三种简写

$( document ).ready(handler) $().ready(handler)//(this is not recommended) $(handler)

window对象和document对象

Window对象表示浏览器中打开的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/jsref/dom_obj_document.asp

Event对象

Event 即事件,代表了各种状态:http://www.w3school.com.cn/jsref/dom_obj_event.asp

事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.文中关注的onload就是其中一个事件.

onload事件

onload 事件: http://www.w3school.com.cn/jsref/event_onload.asp

onload 事件是在加载完成后立即发生.(注意其中的l是小写).

支持该事件的标签是: ,,,