初窥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触发");

  });

  5、unbind([type],[data])就再简单不过了,删除指定元素的绑定事件,如果指定type参数则删除指定的事件,如果没有指定则删除该指定元素的所有事件。

  在这些事情机制中我最常用到的还是bind方法,再常用的就是它的简写方式。当然这些事件机制是可以结合起来用的,关键看业务需求而定。

  前面有人说我写的太简单了,在这里我也再次声明一下,我讲的是基础,我本身接触JQuery也没多久,用意在于加深自己记忆和给刚学习JQuery的朋友一些资料而已,并不是想说我JQuery很厉害。希望大家共同学习,一起进步。未完待续......