jQuery常用事件

jQuery在原来js的基础上，增加并且拓展了基本的事件处理机制，封装了部分方法，比如各浏览器的处理统一性上，提供了更加简单的处理语法，增强了事件处理的能力，真所谓：“write less，do more”，本节我们就来看看jQuery的事件处理机制。
一、事件绑定
语法：bind(type，[data]，f)
参数说明：
type：事件类型，常见的如click，dblclick，mouseover等等，支持的事件类型很多，使用的时候可以查找，开发者也可以自己定义自己的类型名字，比如myClick等。
data：额外的数据对象。
f：绑定的处理函数。
我们来看一个例子，这个例子类似于前面在html5中介绍到的details+summary组合形成的展开收缩的效果，这样的功能我们在后面还会经常看到。

    <span>click me</span>
    <p>
      Test bind
    </p>

$(function(){
  jQueryTest.showOnOff();
});
var jQueryTest = {
  "showOnOff" : function(){
	  $("span").bind("click",function(){
	  if($("p").is(":visible")) {
	    $("p").hide();
	  } else {
	    $("p").show();
	  }
	  });
}};

实现的效果是，点击click me块，就可以显示/隐藏Test bind块。主要是为span元素绑定(bind)了click事件，通过可见/不可见来控制显示和隐藏。当然这种绑定我们也可以简写成$("span").click(function(){...})的形式。
二、合成事件
hover和toggle是jQuery的两个合成事件方法。
hover()方法：
语法：hover(enter，leave)
当光标移上去时触发第一个函数enter，当光标移出去时触发第二个函数leave，这好比mouseover/mouseout以及mouseenter/mouseleave的效果。下面的代码实现的效果跟绑定mouseover/mouseout的一样。

  "showHover" : function(){
    $("span").hover(function(){
        $("p").hide();
      }, function(){
          $("p").show();
        });
    }

toggle()方法：
语法：toggle(f1，f2，....fn)
第n次单击元素，触发函数fn，连续单击下去降轮回调用循环调用下去。这里不做详细介绍了，可以类比hover方法来实现，基本类似。可以配合addClass/removeClass来使用。
三、事件冒泡
冒泡顾名思义，很形象就是水泡向上冒，冒泡排序也就是这么个意思。我们来看看事件冒泡到底是怎么一回事。
我们用元素的层级关系来说明冒泡，假设页面上有三个元素，分别为body，article，section，其中body是另外两个的父元素，而section是article的子元素

    <article>
       外层article元素
      <section>
       内层section元素
      </section>
      外层article元素
    </article>
    <article id="show"></article>

为三个元素都绑定click事件

    "bubbling" : function(){
      $("section").click(function(){
        $("#show").html($("#show").html() + "section clicked</br>");
      });
      $("article").click(function(){
        $("#show").html($("#show").html() + "article clicked</br>");
      });
      $("body").bind("click",function(){
        $("#show").html($("#show").html() + "body clicked</br>");
      });
      }

这样的后果是，当点击了section元素，那么外层的article和body元素的click事件都将被调用，会输出三条消息，这并不是我们最初想要的结果，我们只是想看到section被点击的消息。这样就会产生冒泡，以section/article/body从下至上的顺序产生冒泡过程。
为了避免冒泡产生的以为结果，我们可以采用时间对象，为函数添加一个event参数，这样当单击元素时，事件对象被创建，而且该对象只有事件对应的函数才能访问，处理完毕后，对象就被销毁。结合stopPropagation()方法来停止事件冒泡。我们可以把以上section的绑定代码修改成如下：

      $("section").click(function(event){
        $("#show").html($("#show").html() + "section clicked</br>");
        event.stopPropagation();
      });

这样当单击section元素时，只会出现section clicked的消息，外层的两个元素的click时间不会被触发。
四、事件对象的属性和方法
    event.type：获取时间的类型
    event.preventDefault()：阻止默认的事件行为
    event.stopPropagation()：阻止事件冒泡
    event.target：获取到触发事件的元素
    event.pageX/pageY：获取光标的x/y坐标
    event.which：获取鼠标的左/中/右键，左=1/中=2/右=3
    event.metaKey：获取ctrl键，返回布尔值等等。
五、移除事件
语法：unbind(type，data)
参数说明：
type：事件类型
data：移除的函数名
使用例：$("element").unbind()或$("element").unbind("click")或$("element").unbind("click",myF)都可以。
六、模拟用户行为
不要用户操作，自动执行一些动作。
trgger：$("element").trgger("click")自动执行click事件。
最后再说明一下自定义事件，前面都是讲的现有事件，当然开发者可以自定义自己的事件名称。比如下面的代码是可以的：

      $("section").bind("iClick",function(){
        //TODO
      });
      $("section").trigger("iClick");

本节就简单介绍了jQuery的常用事件处理机制，在开发中要灵活运用，能起到事半功倍的效果。下节讲介绍动画的相关知识。