8.3 jQuery事件
学习目标
熟悉jQuery事件函数、名称冲突和遵循原则。
JavaScript内置了一些对用户的交互和其他事件给予响应的方式。为了使页面具有动态性和响应性，就需要利用这些事件，虽然使用普通的JavaScript也可以做到这一点，但jQuery增强并扩展了这些基本事件处理机制。它不仅提供了更加优雅的事件处理语法，而且也极大地增强了事件处理机制。
8.3.1 代码执行时机选择
其实$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。虽然$(document).ready()和onload具有类似效果，但是，它们在触发操作的时间上存在着微妙的差异。
当一个文档完全下载到浏览器中时，会触发window.onload事件。这意味着页面上的全部元素对JavaScript而言都是可以操作的，这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。另一方面，通过$(document).ready()注册的事件处理程序，则会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。换句话说，当HTML下载完成并解析为DOM树之后，代码就可以运行。
总之，使用$(document).ready()都要优于使用onload事件处理程序。
8.3.2 简写$(document).ready()
在前面提到的$(document).ready()结构，实际上是在基于document这个DOM元素构建而成的jQuery对象上，调用了.ready()方法。$()函数提供了一种简写方式。当调用这个函数而不传递参数时，该函数的行为就像是传递了document参数。也就是说，对于：
$(document).ready(function(){
// jQuery functions code go here
});
也可以简写为：
$().ready(function(){
// jQuery functions code go here
});
此外，这个函数也可以接受另一个函数作为参数。此时，jQuery会在内部执行一次对.ready()的隐含调用，因此，使用下面代码也可以得到相同的结果：
$(function(){
// jQuery functions code go here
});
虽然后面两种写法代码更简短一些，但笔者还是推荐使用较长的形式，因为较长的形式能够更清楚地表明代码在做什么，代码所表达的含义也更明确些。
8.3.3 常用事件函数
jQuery为标准的DOM事件都提供了相应的简写事件方法，如表8-2所示。
表8-2 jQuery应用常用事件
（续表）
8.3.4 单独文件中的函数
如果jQuery函数在相关的很多页面都重复使用，最好把jQuery函数放到独立的.js文件中。然后在具体应用页面中再通过src属性来引用文件具体的js文件。
例如：
<head> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/my_jquery_functions.js"></script> </head>
8.3.5 jQuery名称冲突
在某些情况下，可能有必要在同一个页面中使用多个JavaScript库。由于很多库都使用$标识符，因此就需要一种方式来避免名称冲突。为了解决这个问题，jQuery提供了一个名叫.noConflict()的方法，调用该方法可以把对$标识符的控制权交还给其他库。使用.noConflict()方法的代码格式如下。
<script language="javascript" type="text/javascript" src="prototype. js"></script> <script language="javascript" type="text/javascript" src="jquery. js"></script> <script language="javascript" type="text/javascript"> jQuery.noConflict(); </script>
首先，包含jQuery之外的库（如prototype）。然后，包含jQuery库，取得对$的使用权。接着，调用.noConflict()方法让出$，以便将控制权交还给最先包含的库（prototype）。这样，就可以在自定义脚本中使用两个库了。但是，在需要使用jQuery方法时，必须记住使用jQuery而不是使用$来调用。为了在jQuery代码内部可以继续使用$符号，可以给ready()回调函数传递一个参数，也就是jQuery对象本身。利用这个参数，可以重命名jQuery为$，而不必担心造成名称冲突。代码格式如下。
jQuery(document).ready(function($){
//jQuery functions code go here
//这里可以使用$符号
});
8.3.6 遵循原则
由于jQuery是为处理HTML事件而特别设计的，那么当遵循以下编码原则时，程序代码会更恰当且更易于维护。
（1）把所有jQuery代码置于事件处理函数中。
（2）把所有事件处理函数置于文档就绪事件处理器中。
（3）把jQuery代码置于单独的.js文件中。
（4）如果存在名称冲突，则重命名jQuery库。
在线客服
共有条评论 网友评论