手机版
你好,游客 登录 注册
背景:
阅读新闻

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

[日期:2014-11-12] 来源:Linux社区  作者:Linux [字体: ]

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

JavaScript核心概念及实践 高清PDF扫描版 (邱俊涛)  http://www.linuxidc.com/Linux/2014-10/108083.htm

理解JavaScript中的事件流 http://www.linuxidc.com/Linux/2014-10/108104tm

本文永久更新链接地址http://www.linuxidc.com/Linux/2014-11/109326.htm

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款