JavaScript文档加载顺序和事件绑定
来源:互联网 发布:高级数据恢复工程师 编辑:程序博客网 时间:2024/04/29 16:19
为了保证网页代码层次清晰,便于管理,一般HTML中只体现网页结构,具体的行为处理通过JS实现,样式则通过CSS文件管理。
在以上原则下通过JS实现行为时,一定要注意文档加载过程中,执行JS代码的时机。页面加载过程有两个事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载。)
(1) 一些待调用函数定义,要在调用前定义。
(2) 对于完善网页元素的JS,伴随文档加载执行。
(3) 而绑定元素事件响应的JS,则一定要等到相应元素加载后或文档全部加载完成后再执行,否则无法找到元素,当然不可绑定事件。
对于第(3)种情况,利用JavaScript实现时代码如下。
window.onload = function(){ document.getElementById('id').addEventListener('click',func,false); //需定义响应函数func}
利用JQuery时可有两种写法。
$(function(){ $("#id").click(function(){ //adding your code here }); $("#id").bind('dbclick', function(){ //adding your code here });}); $(document).ready(function(){ $("#a").click(function(){ //adding your code here }); $("#id").bind('dbclick', function(){ //adding your code here });});
另外,需要注意的是,JS实现时,代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。
0 0
- JavaScript文档加载顺序和事件绑定
- 关于事件绑定和$(document).ready(),代码加载顺序
- JavaScript中关于事件绑定、冒泡、捕获和执行顺序
- JavaScript中click和keypress事件绑定的顺序
- javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- JavaScript文档加载完成事件
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- 看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- javascript事件和对象绑定
- JavaScript事件绑定和普通事件区别
- javascript普通事件和绑定事件
- JavaScript事件绑定和普通事件区别
- JavaScript事件绑定和普通事件区别
- JavaScript事件绑定和普通事件区别
- javascript-事件绑定和普通事件
- 屏蔽eclipse logcat信息
- c#.net常用函数和方法集
- 当初的愿望实现了么?
- java中将汉字转换成拼音的实现代码
- 网络电台(WIZ550io)
- JavaScript文档加载顺序和事件绑定
- 黑马程序员 JAVA学习笔记——IO流基础篇
- java线程管理利器:java.util.current的用法举例
- Linux 下的工(发)作(疯)日记
- 【Linux编程】非阻塞I/O
- 携一缕阳光,安度流年
- java实现定时任务的三种方式
- Monkeyrunner
- Linux 无法开机 显示 an error occurred during the file system