四、jquery中的事件与应用
当用户浏览页面时，浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的，即页面在加载时，执行一个Load事件，在这个事件中实现浏览器编译页面代码的过程。时间无论在页面元素本身还是在元素与人机交互中，都占有十分重要的地位。
1.事件中的冒泡现象：
时间在出发后分为两个阶段，一个是捕获（capture），另一个则是冒泡（bubbling）；大多数浏览器不支持捕获阶段，jquery也不支持。因此时间出发后往往执行冒泡过程。
冒泡
<script type="text/javascript"> $(function() { var intI = 0; //记录执行次数 $("body,div,#btnShow").click(function(event) {//点击事件 intI++; //次数累加 $(".clsShow") .show()//显示 .html("您好，欢迎来到jQuery世界!")//设置内容 .append("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本 }) }) </script>
时间在执行过程中纯在冒泡现象，即虽然单机的是按钮，但按钮的外围<div>元素的时间也被出发，同时<div>元素的外围<body>元素的时间也随之被处罚，其整个事件波及的过程就像水泡一样向外冒，故称之为冒泡过程。
阻止冒泡的发生
在实际在实际的，我们并不希望时间的冒泡现象发生，即单机按钮就执行单一的单机时间，并不出发其他外围的时间。在jquery中通过stopProgragation（）方法可以组织冒泡过程的发生。在上述代码中加入如下代码即可
event.stopPropagation();//阻止冒泡过程
另外还可以通过语句retrun false实现挺值时间的冒泡过程。
2.页面载入事件
ready()方法是jquery中的页面载入时间方法，该方法类似于传统的javascript中的onload()方法
两者区别就是方法的执行时间的不同，onload()：页面中的全部元素加载完全才触发，ready():加载前就触发。
ready()的工作原理
在jquery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度。遇到执行ready()，通过查看isReady是否被设置，如果未被设置，那么就说明页面并未加载完成，在次琴光下，将未完成的部分用一个数组缓存起来，当全部家在完成后，再将未完成的部分通过缓存一一执行。
ready()方法的写法
写法一：
$(document).ready(function(){ //代码部分 })
写法二：
$(function(){ //代码部分 })
3.绑定事件
使用bind()方法绑定事件：
bind()方法是为每个选择的元素的事件绑定处理函数，其语法格式如下：
bind(type,[data],fn)
type:一个或多个类型的从字符串，包括click、change、blur、focus、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleft、select、submit、keydown、keypress、keyup、error
data：作为event.data属性值传递给事件对象的额外数据对象
fn：绑定到每个选择元素的事件的中的处理函数。
<script type="text/javascript"> $(function() { $("#btnBind").bind("click mouseout", function() { $(this).attr("disabled", "disabled"); //按钮不可用 }) }) </script>
4.切换事件
有两个方法用于事件的切换，一个是hover()，另一个是方法toggle()。
4-1.hover()方法：
hover()方法可以是元素在鼠标悬停与鼠标移除的事件 中进行切换
下列代码是等价的：
$(".clsTitle").hover(function() {
//执行代码一
}, function() {
//执行代码二
})
等价于
$("a").mouseenter(function(){
//执行代码一
})
$("a").mouseleave(function(){
//执行代码二
})
4-2.toggle方法：
toggle方法可以因此调用N各函数，知道最后一个函数，然后重复对这些函数轮播调用。
toggle(fn,fn2,[fn3,fn4])
其中，参数是因此被调用的函数
5.移除事件
unbind()方法是移除元素绑定的事件，其调用的语法格式如下：
unbind([type],[fn])
其中，参数type为移除的事件类型，fn为需要移除的事件处理函数。如果该方法没有参数，则移除所有绑定的事件；如果带有参数type，移除该参数所制定的事件类型；如果带有桉树fn，则至移除绑定时的函数fn。
6.其他事件
6-1.one()方法：
为所选绑定元素绑定一个浸出法一次的处理函数，语法格式为：
one(type,[data],fn)
6-1.trigger()方法：
可以实现触发性事件，既不必用户做任何事件，自动执行该方法中的事件。示例代码如下：
<script type="text/javascript"> $(function() { var oTxt = $("input"); //获取文本框 oTxt.trigger("select"); //自动选中文本框 oTxt.bind("btn_Click", function() {//编写文本框自定义事件 var txt = $(this).val(); //获取自身内容 $("#divTip").html(txt); //显示在页面中 }) oTxt.trigger("btn_Click"); //自动触发自定义事件 }) </script>
