JavaScript文档加载顺序和事件绑定

最新推荐文章于 2022-04-18 21:42:38 发布

乐哉悠哉

最新推荐文章于 2022-04-18 21:42:38 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JSP/WEB前端文章标签： JavaScript jquery 文档加载事件绑定

本文链接：https://blog.youkuaiyun.com/kleguan/article/details/25981865

JSP/WEB前端专栏收录该内容

4 篇文章

订阅专栏

本文探讨了网页加载过程中的关键事件ready与onload的区别，强调了JavaScript代码执行时机的重要性，尤其是在绑定元素事件响应时。文章还提供了具体的代码示例，并讨论了不同情况下JS代码的执行时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了保证网页代码层次清晰，便于管理，一般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效果就会让用户感觉失效了。