锋利的jQuery之事件

jQuery中的事件和动画

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器会自动生成一个事件。例如：当浏览器装载完成一个文档后，会生成事件；当用户单击某个按钮时也会生成事件。虽然使用javascript事件可以完成这些交互，但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供事件的处理语法，而且极大的增强了事件处理能力。下面我们就一起探讨探讨关于jQuery中的事件与动画。

加载DOM

javaScript代码中，通常使用window.onload方法。在jQuery中，使用是$(function{}方法。后者是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度。

执行机制

javascript中的执行机制为加载网页中所有的任何元素，jQuery中的执行机制为加载HTML标签。

事件绑定

在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind（）方法来对匹配元素进行特定的事件的绑定，bind（）方法的调用格式为：

bind (type,[data],fn);

bind（)方法有3个参数：

1.事件类型：类型包括如下blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseenter...当然也可以自定义名称。

2.可选参数：作为event.data属性值传递给事件对象的额外数据对象。

3.绑定需要处理的函数。

bind（）简单示例

//我们假设网页中有一个FAQ，单击“标题”链接显示内容
<div id = "panel">
  <h3 class="head">什么是jQuery?</h3>
  <div class="content">
     请去查找相关资料
</div>
</div>
//引入样式后我们使用bind( )方法
$(function(){
$("#panle h5.head").bind("click",function(){
          $(this).next().show();
   })
})
//需要效果图的朋友请自己copy到代码中查看我们继续补充一个加强版的
//如果内容是显示则隐藏，如隐藏则显示

$(function(){
$("#panle h5.head").bind("click",function(){
          if($(this).next().is(":visible")){
           $(this).next().hide();
       }else{
           $(this).next().show();
      }
   })
})

合成事件

jQuery有两个合成事件-----------hover()方法与toggle()方法。它俩都属与jQuery自定义的方法。

1.hover（）方法

//语法结构为：
hover(enter,leave);
/*hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发第一个函数（enter）；当光标移出时会出发第2个函数（leave）。
我们将上面的例子改使用hover方法，代码如下：
*/
$(function(){
$("#panel h5.head").hover(function(){
    $(this).next().show();
    }).function(){
    $(this).next().hide();
   }
});

2.toggle（）方法

//语法结构为：
toggle(fn1,fn2,....fnN)；
/*
toggle（）方法用于模拟鼠标连续单击事件，第一次单击触发第一个函数，第二次则是第二个直到最后一个函数调用完成，随后的每次单击都会重复对这几个函数轮番调用。
*/
//我们将上面的例子转换为toggle()方法
$(function(){
$("#panel h5.head").toggle(function(){
     $(this).next().show();
  }).function(){
   $(this).next().hide();
   }
});
//我们可以明显的发现使用toggle（）方法不仅实现同样的效果，同样也简化了代码

事件冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件。如页面中有多个元素，且其中几个元素被嵌套而且都被绑定了单击事件，用户想要单击某个元素的同时就会触发其他元素的单击事件，这就是事件冒泡。如想避免时间冒泡引发的问题就要对时间的作用范围进行限制。为了解决此问题就需了解一下内容：

事件对象

由于IE-DOM和标准DOM实现事件对象的方法各不相同。导致在不同的浏览器中获取事件对象变得比较困难。针对这个问题，jQuery进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。

//在程序中使用事件对象非常简单，是需要为函数添加一个参数，jQuery代码如下：
$("element").bind("click".function(event){
      //...
});
/*单击element元素时事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁*/
/*停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。jQuery中提供了stopPropagation()方法来停止事件冒泡*/

$('sapn').bind("click",function(event){
var txt = $(#msg).html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();      //停止事件冒泡
})；
/*这样当单击<span>元素时候，只会触发该元素上的click事件，而不会触发其他元素的click事件*/

阻止默认行为

网页中的元素有自己默认的行为，例如，单击超链接会跳转，单击提交按钮会表单提交，有时候我们需要进行阻止元素的默认行为。在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。举一个例子：在项目中经常需要验证表单，在单击提交时，验证表单内容，当表单不符合提交条件时我们就要阻止表单的提交（默认行为）。

<script type="text/javascript">
$(function(){
$("#sub").bind("click".function(event){
    var username =$("#username").val();           //获取元素的值
    if(username==""){                                      //判断是否为空
      $("#msg").html("<p>文本框的内容不能为空</p>“); //提示信息
      event.preventDefault();                             //阻止默认行为（表单提交）
      }
   });
});
</script>
用户名：<form action = "test" id="username"/ >
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。即是将event。prevventDefault();改为return  false；也可以将阻止事件冒泡改为return false；

事件捕获

事件捕获和事件冒泡刚好是相反的两个过程，事件捕获是从最顶端往下开始触发。从最外层开始到最里层元素。遗憾的是并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过javaScript来修复jQuery不支持事件捕获。如果需要使用事件捕获请直接使用原生的javascript。

事件对象的属性

jQuery在遵循W3C规范的情况下，对事件的对象常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断

//1.event.type作用是获取事件的类型
$("a").click(function(event){
alter(event.type);//获取事件类型
return false； //阻止连接跳转
})
//输出click
***********************************************************
//2.event.preventDefault()方法  //阻止事件默认行为

//3.event.stopPropagation()方法  //阻止事件冒泡

//4.event.target作用是获取触发事件的元素

$("a[href="http://google.com"]").click(functiom(){
var tg = event.target;  //获取事件对象
alert（tg.href）;
return false;     //阻止连接跳转
})
//输出“http：//google.com”
//更多的event属性和方法可以访问相关的API文档

移出事件

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素使用如下代码为该元素绑定多个事件

<script>
$(function(){
$('#btn').bind("click",function(){
$(#test).append("<p>我绑定的函数1</p>")；
}).bind("click",function(){
$(#test).append("<p>我绑定的函数2</p>")；
}).("click",function(){
$(#test).append("<p>我绑定的函数3</p>")；
});
});
</script>
<button id = "btn">单击我</button>
<button id = "btn2">取消绑定事件</button>
<div id = "test"></div>
*************************************************
//我们要做的就是移除按钮上绑定的click事件
$(#btn2).click(function(){
$("#btn2").unbind("click");  //由于上面代码中事件都为click括号中可以不写参数
});

需要注意的是在1.7版本中又增加了on(),off(),delegate(),undelegate()事件绑定。

模拟操作

以上的例子都是用户必须通过单击按钮才能触发click事件，但是有的时候我们需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击，在jQuery中我们使用trigger（）方法就可以达到模拟操作的方法

语法：
$(#btn).trigger("click");
//也可以简写为：
$("#btn").click();
**************************************************
/触发自定义事件
$("#btn").bind("myClick",function(){
    $("#test").append("<p>我的自定义事件</p>")
})；
//触发这个自定义事件代码如下
$(#btn).trigger("myClick");

执行默认操作

//trigger（）方法触发事件后，会执行浏览器默认操作如：
$("input").trigger("focus");
/*以上代码不仅会触发绑定的focus事件，也会使<input>自身得到焦点（这就是浏览器的默认操作）。如果只想触发绑定的focus事件，而不想执行默认操作，可以使用jQuery中另一个类似的方法---------triggerHandler()方法*/
$("input").triggerHandler("focus");

绑定多个事件类型

$(function(){
$("div").bind("mouseover mouseout",function(){
 $(this).toggleClass("over")
 });
});

好啦！jQuery中的事件就到这里了。如果有所帮助留下你的脚步