事件机制

事件的在触发后被分为两个阶段，一个是捕获，另一个是冒泡。

但是，大多数浏览器并不都是支持捕获阶段，jQuery也不支持。因此，在事件触发后，往往执行冒泡过程。

所谓的冒泡其实实质是事件执行中的顺序。


在代码中，除了使用stopPropagation()方法阻止事件的冒泡过程，还可以通过语句return false实现停止事件的冒泡过程。


页面载入事件ready()

jQuery中ready()方法加载页面，则只要页面的DOM模型加载完毕，就会触发ready()方法。

而JavaScript中的OnLoad()方法必须是页面中的全部元素完全加载到浏览器之后才会触发。

ready()方法的几种写法：

写法1：


$(document).ready(function(){

})




写法2：


$(function(){

})




写法3：


jQuery(document).ready(function(){

})




写法4：


jQuery(function(){

})



绑定事件bind()

可以使用bind()方法进行事件的绑定。

bind()功能是为每个选择元素的事件绑定处理函数，其语法格式如下：

bind(type, [data], fn)



其中参数 type 为一个或多个类型的字符串，如“click”或"change"，也可以是自定义类型。

可以被参数 type 调用的类型包括：

blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error



参数 data 是作为 event.data 属性值传递给事件对象的额外数据对象（很少使用）。

参数 fn 是绑定到每个选择元素的事件中的处理函数。


如果要在一个元素中绑定多个事件，可以将事件用空格隔开。

例如：

$("#btnBind").bind("click mouseout", function(){

})




在jQuery绑定事件时，还可以通过传入一个映射，对所选对象绑定多个事件处理函数。

例如：

$(".txt").bind({
  focus:function(){
      // 事件处理代码  
  },
  change:function(){
      // 事件处理代码
  }
})




切换事件 hover() / toggle()

在jQuery事件中，有两个方法用于事件的切换。一个是方法hover()，另一个是方法toggle()。

所谓切换事件，既有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。

hover()方法

调用jQuery中的hover方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实现运用中，也可以通过jQuery中的事件 mouseenter 与 mouseleave进行替换。

其语法格式为：

hover(over, out)



参数over为鼠标移到元素时触发的函数；参数out为鼠标移出元素时触发的函数。


与下列代码是等价的：

$("a").mouseenter(function(){

})

$("a").mouseleave(function(){

})



与

$("a").hover(
    function(){

    },
    function(){

    }
)



toggle()方法

在 toggle() 方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用（每次单击调用一个函数，顺序循环调用）。

toggle() 方法的功能是每次单击后依次调用函数，其调用的语法格式如下：

toggle(fn, fn2, fn3, ... )



参数 fn, fn2, fn3 ... ...为单击时被依次调用的函数。


移除事件unbind()

通过unbind()方法移除绑定的所有事件或指定某一个事件。

语法格式为：

unbind([type],  [fn])



参数 type 为移除的事件类型， fn 为需要移除的事件处理函数；

如果该方法没有参数，则移除所有绑定事件：如果带有参数 type，则移除该参数所指定的事件类型； 如果带有参数fn，则只移除绑定时指定的函数fn。


其他事件 one() / trigger() / triggerHandler()

方法one()

one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，其调用的语法格式为：

one(type, [data], fn)



参数type为事件类型；参数data为可选参数，表示作为event.data属性值传递给事件对象的额外数据对象；fn为绑定事件时所要触发的函数。


方法trigger() / triggerHandler()

trigger()方法的功能是在所选择的元素上触发指定类型的事件。

其调用的语法格式为：

trigger(type, [data])



参数type为触发事件的类型（可以指定一个自定义事件），参数data为可选项，表示在触发事件时，传递给函数的附加参数。

例如：

var oTxt = $("input");
oTxt.trigger("select");              // 自动选中文本框

oTxt.bind("btn_Click", function(){   // 文本框自定义事件
	
});

oTxt.trigger("btn_Click");           // 自动触发自定义事件



trigger()方法会导致浏览器同名的默认行为的执行。 triggerHandler()方法将会触发指定的事件类型上所有绑定的处理函数，但不会执行浏览器的默认动作。