对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子:
1-1
click me.
如果这样,还没有等待元素加载完就绑定事件,
浏览器Console中会报错:
TypeError: document.getElementById(...) is null
更改一下时机,下面三个程序都是可以成功绑定事件的,点击元素之后会弹出相应的alert().
第一种是把事件绑定放在body里,元素之后:
1-2
click me.
第二种是放在window.onload中进行事件绑定:
1-2
click me.
第三种是jQuery的ready()方法传入绑定事件的方法:
1-3
click me.
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之后,对page的操作才是安全的.
$(document).ready()仅在DOM准备好的时候执行一次.
**与之相比,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/js...
Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/js...
Event对象
Event即事件,代表了各种状态:http://www.w3school.com.cn/js...
事件句柄使我们可以在事件发生的时候附加一些操作和处理,比如按钮点击事件发生的时候,进行什么什么操作.
上面的参考链接中含有一个属性列表,对应各种事件,可以利用这些属性定义事件的行为.
本文关注的onload就是其中一个事件.
onload事件
onload事件: http://www.w3school.com.cn/js...
onload事件是在加载完成后立即发生.(注意其中的l是小写).
支持该事件的标签是: , , ,