jQuery 中的事件

1、加载 DOM

下列三份代码是一样的：

   1:  $(document).ready(function(){

   2:      //code omitted here...

   3:  });

   1:  $().ready(function(){

   2:      //code ommited here...

   3:  });

   1:  $(function(){

   2:      //code omitted here...

   3:  });

后面两者都是第一种的简写形式，具体选择哪个由自己爱好决定。 jQuery 中的代码都应该放在上面的三份代码里面才会被执行。

2、事件绑定

进行事件绑定的方法是 bind( type [, data ], fn); 这个方法有 3 个参数。

type 是事件类型，jQuery 里面的事件类型也是支持自定义事件的。第二个参数是可选的，作为属性值传递给事件对象的额外数据。第三个参数就是被绑定的方法了。

用法参见下例：

   1:  $("body").bind("click",function(e){

   2:      alert("Never click here ! "+"("+e.pageX+","+e.pageY+")");

   3:  });

若是在不同浏览器上面调试这段代码，会发现还是比较有意思的，边缘地带点击没啥反应，Safari 中的效果比较意外，有兴趣的可以试试。

像是这种 click 、mouseover 等事件比较常见的，jQuery 还提供了一种简单的写法：

   1:  $("body").click(function(e){

   2:      alert("Never click here ! "+"("+e.pageX+","+e.pageY+")");

   3:  });

3、合成事件

jQuery 中有两个合成事件：hover()  和 toggle() 。toggle() 方法在讲切换样式的时候讲过，类似的 hover() 也是一样的用法，只是把 click事件 改为 mouseenter 事件和 mouseleave 事件。示例代码如下：

   1:  $("body").hover(function(){

   2:      $(this).css("background","#EEEEEE");

   3:  },function(){

   4:      $(this).css("background","#FFFFFF");

   5:  });

   1:  $("body").toggle(function(){

   2:      $(this).css("background","#EEEEEE");

   3:  },function(){

   4:      $(this).css("background","#FFFFFF");

   5:  },function(){

   6:      $(this).css("background","#000000");

   7:  });

 

4、事件冒泡

看下面的代码：

   1:  $("body").click(function(){

   2:      $(this).css("background","#EEEEEE");

   3:  });

   4:  $("ul").click(function(){

   5:      $("body").html("
NO CLICK !!!
");

   6:  });

当在 ul 标签之外的 body 点击，页面会变色，但是如果在 ul 上面点击的话，不仅仅页面内容变成 NO CLICK 了，页面也同时变色了，这是因为 ul 也属于 body 。这里的事件冒泡就是指用户在点击 ul 之后 ul 会将事件源传递给 body ，让 body 也响应事件。这个机制和 Flex 中的事件冒泡机制不同，要简单多。

就上面的代码，如果要实现点击 ul 仅仅改变页面内容而不改变页面背景色，我们需要阻止事件冒泡。我们可以给方法加一个事件对象，再调用 stopPropagation() 方法阻止事件冒泡实现，代码如下：

   1:  $("body").click(function(e){

   2:      $(this).css("background","#EEEEEE");

   3:  });

   4:  $("ul").click(function(e){

   5:      $("body").html("
NO CLICK !!!
");

   6:      e.stopPropagation();

   7:  });

说到事件对象，我们就顺便了解一下 preventDefault() 方法，preventDefault() 方法是用来阻止浏览器的默认行为的，例如：

   1:  $("#submit").bind("click",function(e){

   2:      if($("#username").val()==""){

   3:          alert("用户账号不能为空哦，O(∩_∩)O~~");

   4:          e.preventDefault();

   5:      }

   6:  });

此外，我们还可以通过在方法中返回 false 实现同时阻止事件冒泡和浏览器的默认行为(尽管有时候我们只需要阻止一个)：
   
   

    
    
   1:  $("body").click(function(){
    
    
   2:      $(this).css("background","#EEEEEE");
    
    
   3:  });
    
    
   4:  $("ul").click(function(){
    
    
   5:      $("body").html("
NO CLICK !!!
");
    
    
   6:      return false;
    
    
   7:  });
   
   

   1:   

   2:  $("#submit").bind("click",function(){

   3:      if($("#username").val()==""){

   4:          alert("用户账号不能为空哦，O(∩_∩)O~~");

   5:          return false;

   6:      }

   7:  });

这时候我们就不需要事件对象了。

5、事件对象

现在我们开始讲事件对象，事件对象在上面的事件冒泡已经讲过，主要介绍一些方法和属性。

5.1  type 属性

此属性代表事件类型，示例：

   1:  $("body").click(function(e){

   2:      alert(e.type);

   3:  });

5.2 target 属性

此属性代表触发时间的元素，示例：

   1:  $("a").click(function(e){

   2:      alert(e.target.href);//获取超链接的地址；

   3:      return false;//阻止连接超链接的默认行为；

   4:  });

5.3 pageX  和 pageY 属性

此属性代表时间发生点的 X 和 Y 坐标，在事件绑定中已有示例。

5.4 which 属性

此属性代表点击鼠标的左中右键，1、2、3 分别代表左、中、右键。

5.5 stopPropagation() 和 preventDefault() 方法

已在事件冒泡中讲过，可以用 return false 同时实现两个方法。

6、移除事件

移除事件对应的方法是 unbind() ，移除事件分多种可能，比方说，有一个按钮绑定了多个事件，移除事件可能是想移除此按钮的所有事件，或者是移除某一类型事件，比如说 click 事件，再或者仅是想移除此按钮的某一个特定事件。

6.1 移除元素的所有绑定事件

移除元素的所有绑定事件可以调用无参的 unbind() 方法：

   1:  $("body").bind("click",function(){

   2:      $("a").unbind();

   3:  });

调试这段代码时候我发现之前的某些代码在 safari 中调试感觉怪异的原因了，safari 把点击 javascript 提示框的也算作是在点击 body 了。

6.2 移除元素的某一类型事件

移除元素的某一类型事件在调用 unbind() 方法时应该传入解除绑定的事件类型名称：

   1:  $("body").bind("click",function(){

   2:      $("a").unbind("click");

   3:  });

6.3 移除某一特定事件

移除某一特定事件就得在定义事件的时候为事件起个名称：

   1:  $("a").click(a_click = function(e){

   2:      alert(e.which);

   3:      return false;

   4:  });

然后通过调用 unbind() 方法，并且传入两个参数，一个是时间类型，一个是特定的方法名称，来解除特定事件的绑定：

   1:  $("body").bind("click",function(){

   2:      $("a").unbind("click",a_click);

   3:  });

这里需要注意的是：

①必须要指明事件类型；

②方法名称不是字符串；

③不同事件类型的方法不能重名（重名后解除事件无法工作，尽管在 unbind() 方法中传入了足够的判断参数）；

7、模拟事件

可能我们需要在网页加载结束就立即执行某个元素的某个事件，而不是等到用户主动去点击此元素而产生事件，这时需要的操作就是模拟事件。

模拟操作我们需要调用一个 trigger() 方法，此方法的参数是需要模拟的事件类型：

   1:  $("a").trigger("click");

上段代码会在用户一进入页面就立即执行，而不是等待用户主动去点击。

jQuery 还提供了另外一个简单的模拟操作方法：

   1:  $("a").click();

同上一段代码具有相同的效果。

如果页面上面有一个文本输入框，我们想要在用户一进入页面就执行此文本输入框的 focus 事件，并且此文本输入框得到焦点，我们可以这样做：

   1:  $("#input").focus(function(){

   2:      alert("Please input here..");

   3:  });

   4:   

   5:  $("#input").focus();

但是如果我们需要的效果是用户进入界面仅仅立即执行此文本框的 focus 事件就结束了，而不是后续的让此文本框得到焦点，我们就需要调用另一个方法 triggerHandler() ：

   1:  $("#input").triggerHandler("focus");

这时候用户进入网页仅会提示 "Please input here.."，而不立即使得该文本框获得焦点。

---EOF---

未完不续