初窥JQuery(二)事件机制(2)

165 阅读 0 评论 109 点赞

我是靠谱客的博主聪明秋天，最近开发中收集的这篇文章主要介绍初窥JQuery(二)事件机制(2)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简单的说Jquery的事件处理机制就相当与在HTML标签中指定各种事件，比如onclick(),keydown()等，在标签中指定事件对应到Javascript的函数，便于我们实现我要求。而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触发"); 
}); 