【jQuery】中事件处理与应用

1 事件机制

事件触发后，分为两个阶段：一个是捕获（capture），一个是冒泡（bubbling）。但大部分浏览器不支持捕获，JQuery也不支持，往往执行冒泡过程。如图：

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

可以通过event.stopPropagation()来停止冒泡。

举例：

$("#btnShow").click(function(event){
    //......
    event.stopPropagation();
})

2 页面载入事件

ready()方法：

1、和onload()方法不同，onload需要加载所有的页面元素，而ready()只需要加载完DOM元素就可以执行了，速度明显加快。

不同的写法：

//写法一
$(document).ready(function(){
//代码部分
})

//写法二
$(function(){
//代码部分
}) 

//写法三
jQuery(document).ready(function(){
}) 

//写法四
jQuery(function()){}

3 绑定事件

为相关的HTML元素绑定事件。

如：

$("#btnShow").click(function(event){
    //代码    
})

还提供了bind()方法，形式为：bind(type,[data],fn)，所以上面代码也可以写成：

$("#btnShow").bind("click",function(event){
    //代码
})

如果要绑定多个事件，需要用空格将事件隔开

$("#btnShow").bind("click mouseout",function(event){
    //代码
})

还可以通过映射绑定多个事件处理函数。

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

还可以传入参数

$(".txt").bind("focus",{msg:message},function(event){
var val = event.data.msg;
//其他代码
});

4 切换事件

JQuery中有两种方法切换事件，一是hover()，二是toggle()。

hover()方法可以使元素在鼠标悬停和鼠标移出的事件中进行切换。

toggle()方法可以依次调用N个指定的函数（每次调用一个），直到最后一个函数，然后重复对这些函数进行轮番调用。

5 移除事件

unbind()方法可以移除绑定的所有事件，或指定的某个事件。

$("#showBtn").unbind();

6 其他事件

one()：为所选的元素绑定一个仅触发一次的处理函数，语法格式：one(type,[data],function)

trigger()：自动执行操作，语法格式：trigger(type,[data])