jquery 事件机制
在介绍方法之前，我觉得有必要描述一下响应事件的两种策略，一种是事件捕获(Event capturing)，一种是事件冒泡(Event bubble)，这两种策略是相对立的，它们是在浏览器大战中分别由Netscape和微软提出的完全相反的两种事件传播模型。事件冒泡定义为在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层。而事件捕获则与事件冒泡则恰好相反，处理事件是从对象的最外层往里传播，直到终止。W3C标注是支持两种事件处理策略的，但是却更偏向于事件冒泡，因为事件捕获Bug较多，目前IE是不支持事件捕获的，其他浏览器基本两种都支持。下面我给一个事件冒泡的例子，自己试一下就明白了，至于事件捕获就算了.....
事件冒泡
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head
>
<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=utf-8
"
/
>
<
title
>
JavaScript事件冒泡
<
/
title>
<
style type
=
"
text/css
"
>
#box {width:200px; height:100px; border:2px solid red}
#box h5 {margin:
0
; padding:2px 5px; font
-
size:18px; text
-
align:right; background:red; cursor:move}
#box h5 a {text
-
decoration:none; color:#FFF}
#box div{ white
-
space:inherit;}
<
/
style>
<
/
head>
<
body
>
<
div id
=
"
box
"
>
<
h5 onmousedown
=
"
startDrag();
"
><
a onmousedown
=
"
closeBox();
"
href
=
"
javascript:void(0);
"
>
关闭
<
/
a><
/
h5
>
<
div id
=
"
testInfo
"
><
/
div>
<
/
div>
<
script type
=
"
text/javascript
"
>
function
startDrag() {
document.getElementById(
'
testInfo
'
).innerHTML
+=
'
层事件
'
;
}
function
closeBox(e) {
document.getElementById(
'
testInfo
'
).innerHTML
+=
'
关闭事件
'
;
//
将下面一段注释去掉则可以阻止冒泡
//
if (e && e.stopPropagation)
//
e.stopPropagation();
//
else
//
window.event.cancelBubble = true;
}
<
/
script>
<
/
body>
<
/
html>
那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默认行为)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回return false;(阻止默认行为和时间冒泡)。
事件处理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])这几个方法。
1、bind(type,[data],fn)用于为指定元素绑定指定的事件处理函数，[data]代表可选的传递的参数，它的写法为：
代码
//
带参数的绑定方式
$(
"
#text
"
).bind(
'
click
'
, { result:
"
yes
"
},
function
(event) {
alert(event.data.result);
})
//
不带参数并且阻止冒泡
$(
"
#text
"
).bind(
'
click
'
,
function
(e) {
//
自定义处理行为
e.stopPropagation();
})
其实bind(type,[data],fn)这种绑定事件的方式我们还有一种简写的方式，但是他们的区别在于简写方式不能如bind一样指定参数[data]，他的写法就是直接将bind中type参数执行，如下：
$(
"
#text
"
).click(
function
(e) {
//
自定义处理行为
alert(
"
简写方式
"
);
})
2、bind(map)就是一次性为元素绑定多个事件处理函数，写法如下：
代码
$(
'
#text
'
).bind({
click:
function
() {
alert(
"
bind(map)绑定的click事件
"
);
},
mouseenter:
function
() {
alert(
"
bind(map)绑定的mouseenter事件
"
);
}
});
3、one(type,[data],fn)指定事件只执行一次，写法与bind()方法一样，在此就不做示范。
4、trigger(type,[data])、triggerHandler(type,[data])其实作用是一样的，都是在每一个匹配的元素上触发某类事件，唯一的区别就是前者是执行事件冒泡事件的，而后者只执行指定元素的事件。下面做个比较：
代码
//
HTML代码：
<
button id
=
"
trigger
"
>
trigger()
<
/
button>
<
button id
=
"
triggerHandler
"
>
triggerHandler()
<
/
button><br
/
><
br
/
>
<
div id
=
"
triggerdiv
"
>
<
div id
=
"
tri
"
><
/
div>
<
/
div>
//
JQuery代码
$(
"
#triggerdiv
"
).click(
function
() {
alert(
"
DIV触发
"
);
});
$(
"
#trigger
"
).click(
function
() {
$(
"
#tri
"
).trigger(
"
click
"
);
});
$(
"
#triggerHandler
"
).click(
function
() {
$(
"
#tri
"
).triggerHandler(
"
click
"
);
});
$(
"
#tri
"
).click(
function
() {
alert(
"
子集DIV触发
"
);
});
5、unbind([type],[data])就再简单不过了，删除指定元素的绑定事件，如果指定type参数则删除指定的事件，如果没有指定则删除该指定元素的所有事件。
在这些事情机制中我最常用到的还是bind方法，再常用的就是它的简写方式。当然这些事件机制是可以结合起来用的，关键看业务需求而定