jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
2016-05-09 18:53
841 查看
$().ready()、$(handler)、$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法。这些事件在当页面的dom节点加载完毕后就执行,无需等待页面中的图片等加载完成。DomContentLoaded是原生的表示在Dom节点加载完毕之后就执行该事件。
window.onload()以及body中的onload()两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,是原始JS中就有的。同时window.onload只能注册一个事件处理函数,和原生JS通过属性注册事件的原理(详情见博客)是一样的,后面注册的会覆盖前面的 ,在IE10和火狐中window.onload和body.onload是一样的,所以在后面的会覆盖前面的,但是在chrome中则两者不一样注册的事件均会被执行。
a、当JS代码在head中时且window.onload()中方法是匿名时:将会跳过window中的方法。
<html>
<head>
<script type="text/javascript"> alert('a');
window.onload=function () {
alert('b');
} ;
alert('c');
</script>
</head>
<body onload="alert('d');">
</body>
</html>
上面的代码在IE10以及火狐中执行的结果是:a,c,d,在谷歌中的结果为:a、c,b,d
b、当JS代码在body中:
<html>
<head>
</head>
<body onload="alert('a');">
<script type="text/javascript"> alert('b');
window.onload=fn;
function fn () {
alert('c');
} ;
alert('d');
</script>
</body>
</html>
谷歌火狐等的执行结果为:b,d,c
注意在给window.onload赋值的时候是赋值的方法名或者匿名函数而不是方法,否则直接执行函数,结果不是预期的效果
window.onload()以及body中的onload()两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,是原始JS中就有的。同时window.onload只能注册一个事件处理函数,和原生JS通过属性注册事件的原理(详情见博客)是一样的,后面注册的会覆盖前面的 ,在IE10和火狐中window.onload和body.onload是一样的,所以在后面的会覆盖前面的,但是在chrome中则两者不一样注册的事件均会被执行。
a、当JS代码在head中时且window.onload()中方法是匿名时:将会跳过window中的方法。
<html>
<head>
<script type="text/javascript"> alert('a');
window.onload=function () {
alert('b');
} ;
alert('c');
</script>
</head>
<body onload="alert('d');">
</body>
</html>
上面的代码在IE10以及火狐中执行的结果是:a,c,d,在谷歌中的结果为:a、c,b,d
b、当JS代码在body中:
<html>
<head>
</head>
<body onload="alert('a');">
<script type="text/javascript"> alert('b');
window.onload=fn;
function fn () {
alert('c');
} ;
alert('d');
</script>
</body>
</html>
谷歌火狐等的执行结果为:b,d,c
注意在给window.onload赋值的时候是赋值的方法名或者匿名函数而不是方法,否则直接执行函数,结果不是预期的效果
相关文章推荐
- 关于jquery 取值,赋值常用控件的问题
- jquery监听鼠标滚轮(滚动)事件
- 基于jquery实现智能表单验证操作
- 基于jquery实现表格内容筛选功能实例解析
- jQuery 三级菜单
- jQuery绑定事件-多种实现方式总结
- jquery 处理 json
- jQuery在HTML中动态插入节点的常用方法
- jquery easyui 弹出对话框被activex控件遮挡问题
- jQuery中serializeArray serialize()区别
- jQuery Mobile orientationchange 事件
- 基于Jquery的banner轮播插件,简单粗暴
- jquery获取ul中li的值
- jQuery轻松实现表格的隔行变色和点击行变色的实例代码
- jquery实现表格中点击相应行变色功能效果【实例代码】
- jQuery动画
- JQuery--使用JQuery 的$.ajax 方法进行异步请求,导致页面闪烁
- JqueryUI学习笔记-自动完成autocomplete
- jQuery+CSS实现一个侧滑导航菜单代码
- jQuery中.bind() .live() .delegate() .on()的区别