2010年12月19日jquery事件机制【转】在介绍方法之前，我觉得有必要描述一下响应事件的两种策略，一种是事件捕获(Eventcapturing)，一种是事件冒泡(Eventbubble)，这两种策略是相对立的，它们是在浏览器大战中分别由Netscape和微软提出的完全相反的两种事件传播模型。事件冒泡定义为在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层。而事件捕获则与事件冒泡则恰好相反，处理事件是从对象的最外层往里传播，直到终止。W3C标注是支持两种事件处理策略的，但是却更偏向于事件冒泡，因为事件捕获Bug较多，目前IE是不支持事件捕获的，其他浏览器基本两种都支持。下面我给一个事件冒泡的例子，自己试一下就明白了，至于事件捕获就算了.....事件冒泡<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="www3.org/1999/xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/><title>JavaScript事件冒泡</title><styletype="text/css">#box{width:200px;height:100px;border:2pxsolidred}#boxh5{margin:0;padding:2px5px;font-size:18px;text-align:right;background:red;cursor:move}#boxh5a{text-decoration:none;color:#FFF}#boxdiv{white-space:inherit;}</style></head><body><divid="box"><h5onmousedown="startDrag();"><aonmousedown="closeBox();"href="javascript:void(0);">关闭</a></h5><divid="testInfo"></div></div><scripttype="text/javascript">functionstartDrag(){document.getElementById('testInfo').innerHTML+='层事件';}functioncloseBox(e){document.getElementById('testInfo').innerHTML+='关闭事件';//将下面一段注释去掉则可以阻止冒泡//if(ee.stopPropagation)//e.stopPropagation();//else//windoevent.cancelBubble=true;}</script></body></html>那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默认行为)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回returnfalse;(阻止默认行为和时间冒泡)。事件处理包括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代码：<buttonid="trigger">trigger()</button><buttonid="triggerHandler">triggerHandler()</button><br/><br/><divid="triggerdiv"><divid="tri"></div></div>//JQuery代码$("#triggerdiv").click(f...
