jQuery学习笔记3 - jQuery事件

jQuery事件

jQuery封装了JavaScript中所有的事件，使得其操作更加简单方便，并且使得这些事件能够兼容各大浏览器，减少我们大量代码的编写。

jQuery事件包括两类：

1. jQuery对象的常规事件方法
   常规事件函数，主要用于为元素的指定事件添加、触发绑定的一个或多个事件处理函数。
   如:ready(),resize(),focus(),blur(),mousedown(),click(),toggle()等。
2. jQuery对象的核心事件方法
   核心事件函数，主要用于为元素的任意事件(包括自定义事件)添加、取消、触发绑定的一个或多个事件处理函数。
   如：bind(),one(),delegate(),unbind(),off()，trigger()等。
   在jQuery中，我们需要学习9种事件操作：
   （1）页面载入事件；
   （2）鼠标事件；
   （3）键盘事件；
   （4）表单事件；
   （5）滚动事件；
   （6）绑定事件；
   （7）解绑事件；
   （8）合成事件；
   （9）一次事件；

页面载入事件

在jQuery中，对于页面载入事件，我们使用$(document).ready()方法来替代JavaScript中的window.onload方法

ready()函数用于在当前文档结构载入完毕后立即执行指定的函数。
该函数的作用相当于window.onload事件。

window.onload与$(document).ready()区别：

1. 加载方式不一样：

• window.onload方法：在页面所有DOM元素（包括图片等外部文件）加载完成之后才执行，此时我们才可以操作DOM。也就是说，除了元素加载完成（说白了就是HTML代码），元素所关联的文件（如img元素就关联了图片）也必须加载完成之后，才会执行window.onload方法。

• $(document).ready()方法：在页面所有DOM元素（不包括图片等外部文件）加载完成就可以执行，此时我们就可以操作DOM。
  $(document).ready()仅仅是DOM元素加载完成就可以执行，而window.onload除了DOM元素加载完成外还需要等待所有外部文件加载完成才可以执行。
  使用$(document).ready()相对window.onload来说，可以极大地提高页面的响应速度，执行效率非常高。

1. 调用次数不一样：

• 在JavaScript中，window.onload方法只能调用1次，如果多次调用，则执行最后一个window.onload方法中的代码。如果想要实现多个window.onload方法的同时调用，还需要写上一段兼容性代码。
• 在jQuery中，$(document).ready()却可以多次执行。

ready()方法的4种写法

//方法1：
$(document).ready(functin(){
    //代码部分
})
//其中$(document)表示“选取document”，然后调用jQuery对象的ready()方法。 

//方法2：
jQuery(document).ready(function(){
    //代码部分
})

//方法3：
$(function(){
    //代码部分
})

//方法4：
jQuery(function(){
    //代码部分
})

鼠标事件

jQuery常见鼠标事件如下：

鼠标事件	说明
click	鼠标单击事件
dblclick	双击事件
mouseover	移入事件
mouseout	移出事件
mousemove	移动事件
mousedown	按下事件
mouseup	松开事件

示例：

$("#btn").click(function () {
        alert("表单提交成功！");
    });

以点击事件(“click”)为例，以下是jQuery中事件函数的常规用法

// 这里的选择器selector用于指定可以触发事件的元素
// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"代理"的形式触发事件。

// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );

// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );

// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );

// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );

// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

在jQuery中，任何元素都可以添加单击事件。

mouseenter和mouseleave

• mouseenter事件在鼠标进入某个元素的时候就会触发，这个跟mouseover事件相似。但是这两者也有区别：
  – mouseover事件在鼠标移入“所选元素及其后代子元素”时都会触发；
  – mouseenter事件只有鼠标移入“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。

• mouseleave事件在鼠标移出某个元素的时候就会触发，这个跟mouseout事件相似。但是这两者也有区别：
  – mouseout事件在鼠标移出“所选元素及其后代子元素”时都会触发；
  – mouseleave事件只有鼠标移出“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。

键盘事件

jQuery键盘事件只有3个：

事件	说明
keydown	按下键事件（包括数字键、功能键）
keypress	按下键事件（只包含数字键）
keyup	放开键事件（包括数字键、功能键）

三个事件的执行顺序如下：keydown → keypress → keyup；

在input元素上绑定keydown事件会发现一个问题：

每次获取的内容都是之前输入的，当前输入的获取不到

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本

当浏览器捕获键盘输入时，还提供了一个keypress的响应，这个跟keydown是非常相似.

keypress事件与keydown和keyup的主要区别

• 对中文输入法支持不好，无法响应中文输入
• 无法响应系统功能键（如delete，backspace）
• 由于前面两个限制，keyCode与keydown和keyup不是很一致
• 总而言之，

KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

如果想要在jQuery中使用组合键，可以分别利用event事件对象中的event.ctrlKey、event.shiftKey、event.altKey判断是否按下了Ctrl键、Shift键或Alt键。

表单事件

在jQuery中，常用的表单事件有4种：
（1） focus()事件；
（2） blur()事件；
（3） change()事件；
（4） select()事件；
（5） submit()事件
（6） focusin()和focusout()事件

focus()事件和blur()事件

具有获得焦点和失去焦点事件的元素有3个：
（1） 单行文本框text；
（2） 多行文本框textarea；
（3） 下拉列表select；

change()事件；

在jQuery中，当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事件。

具有获得onchange事件的元素有3个：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；

select()事件；

在jQuery中，当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。
select事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。

下拉列表列表项的选中触发的事件是change而不是select。

submit()事件

submit事件会在表单被提交时触发。该事件仅适用于<form>元素。
要删除通过submit()绑定的事件，请使用unbind()函数。
$().submit( [ [ data ,] handler ] )

• 如果指定了至少一个参数，则表示绑定submit事件的处理函数；没有指定任何参数，则表示触发submit事件。
• data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler 可选/Function类型指定的事件处理函数。
• 参数handler中的this指向当前DOM元素。submit()还会为handler传入一个参数：表示当前事件的Event对象。

  /* html代码<form id="myForm" action="http://www.365mini.com" method="post">    <input id="name" name="name" type="text" value="CodePlayer" /><br>    <input id="age" name="age" type="text" value="20" /><br>    <input type="submit" value="提交" /></form><div id="msg"></div>*/
  <form id="myForm" action="http://www.365mini.com" method="post">
      <input id="name" name="name" type="text" value="CodePlayer" /><br>
      <input id="age" name="age" type="text" value="20" /><br>
      <input type="submit" value="提交" />
  </form>
  <div id="msg"></div>
  */
  $("form").submit( function(event){
      if( !$("#name").val() ){
          alert("姓名不能为空!");
          return false; // 返回值为false，将阻止表单提交
      }else if( !$("#age").val() ){
          alert("年龄不能为空!");
          return false; // 返回值为false，将阻止表单提交
      }
  } );
  
  // 触发form元素的submit事件
  // $("form").submit( );

focusin()事件

focusin事件就是获得焦点事件。与focus事件不同的是：focusin可以检测该元素的后代元素获得焦点的情况(换句话说，focusin事件支持冒泡)。
$().focusin( [ data ,] handler )

• data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler Function类型指定的事件处理函数。
• 参数handler中的this指向当前DOM元素。focusin()还会为handler传入一个参数：表示当前事件的Event对象。

  /*html代码<p>    <input id="t1" name="name" type="text" /></p><p>    <input id="t2" name="age" type="text" /></p><div id="msg"></div>*/
  <p>
      <input id="t1" name="name" type="text" />
  </p>
  <p>
      <input id="t2" name="age" type="text" />
  </p>
  <div id="msg"></div>
  */
  var $ps = $("p");
  
  //为所有p元素的focusin事件绑定处理函数
  $ps.focusin( function(event){
      $(this).css("border", "1px solid blue");
  } );
  
  //为所有p元素的focusin事件绑定处理函数
  $ps.focusin( function(event){
      $(this).css("border-radius", "3px");
  } );
  
  //触发所有p元素的focusin事件
  //$ps.focusin( ); // 调用不带任何参数的focusin()函数，会触发每个匹配元素的focusin事件

focusout()事件

focusout事件就是失去焦点事件。与blur事件不同的是：focusout可以检测该元素的后代元素获得焦点的情况(换句话说，focusout事件支持冒泡，blur不支持)。
$().focusout( [ data ,] handler )

• data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler Function类型指定的事件处理函数。
• 参数handler中的this指向当前DOM元素。focusin()还会为handler传入一个参数：表示当前事件的Event对象。

  /*html代码<p>    <input id="t1" name="name" type="text" /></p><p>    <input id="t2" name="age" type="text" /></p><div id="msg"></div>*/
  <p>
      <input id="t1" name="name" type="text" />
  </p>
  <p>
      <input id="t2" name="age" type="text" />
  </p>
  <div id="msg"></div>
  */
  var $ps = $("p");
  
  //为所有p元素的focusout事件绑定处理函数
  $ps.focusout( function(event){
      $(this).css("border", "1px solid blue");
  } );
  
  //为所有p元素的focusout事件绑定处理函数
  $ps.focusout( function(event){
      $(this).css("border-radius", "3px");
  } );
  
  //触发所有p元素的focusout事件
  //$ps.focusout( ); // 调用不带任何参数的focusout()函数，会触发每个匹配元素的focusout事件

滚动事件

滚动事件，指的是当滚动条位置发生改变时触发的事件。滚动事件很有用，在“回顶部特效”以及现在扁平化网页中的动画中大量涉及到。
$().scroll(fn)
参数fn表示事件处理函数，也就是function(){}。
scroll()滚动事件常常和scrollTop()和scrollLeft()这两个方法结合使用。

绑定事件

在jQuery中，如果我们想要为某些元素添加某个事件来完成操作，可以有2种方法：
（1）基本事件；
（2）绑定事件；
基本事件，指的是使用click()、dblclick()这种“事件方法”。而绑定事件，指的是使用on()方法。

on()方法
在文档加载完成后，如果我们想要为元素绑定某个事件来完成某些操作，可以使用on()方法来实现。
在jQuery中，我们可以使用on()方法为某些元素绑定一个事件或者多个事件。
$().on(type , fn)
$().on(type[,selector][,data],fn)
$().on(eventsMap[,selector][,data])
说明：

• type为必选参数，String类型 一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
• eventsMap: Object类型 一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数fn)。
• selector: 可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
• data: 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• fn为必选参数，表示事件的处理函数。
• 如果传递了selector参数，那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。
• 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

1、为“已经存在的元素”绑定事件
在jQuery中，on()方法可以为“已经存在的元素”添加绑定事件。

$(function () {
            $("#btn").on("click", function () {
                alert("绿叶学习网jQuery入门教程！");
            })
        })
//上述代码等价于下面的代码：
$(function () {
            $("#btn").click(function () {
                alert("绿叶学习网jQuery入门教程！");
            })
        })

2、为“未来创建的元素”绑定事件
在jQuery中，on()方法不仅可以为“已经存在的元素”添加绑定事件，还可以为“未来创建的元素”添加绑定事件。所谓的“未来创建的元素”指的是使用jQuery创建的元素。

$(function () {
            var $btn = $('<input id="btn" type="button" value="按钮"/>');
            $($btn).appendTo("body");
            $("#btn").on("click", function () {
                alert("绿叶学习网jQuery入门教程！");
            });
        })

// 为div中的所有p元素绑定click事件处理程序
$("div").on("click", "p", function(){
    // 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});
//为所有p元素绑定click事件处理程序(注意：这里省略了selector参数)
$("p").on("click", function(event){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

“基本事件”无法为“未来创建的元素”添加绑定事件，而“绑定事件”却可以为“未来创建的元素”添加绑定事件。

多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );
可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

委托机制
.on( events [, selector ] [, data ], handler(eventObject) )

解绑事件

在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。
$().off(type)
type为必选参数，表示事件类型，例如单击事件是“click”，双击事件是“dblclick”，以此类推。(type为字符串)
案例：

$(function () {
            //为btn添加click事件
            $("#btn").click(function () {
                alert("绿叶学习网jQuery入门教程！");
            })
            //点击btn-off后，为btn解除click事件
            $("#btn-off").click(function () {
                $("#btn").off("click");
            })
        })

off()方法不仅可以解绑“使用绑定事件所添加的事件”，还可以解绑“使用基本事件所添加的事件”。

合成事件

鼠标移入和鼠标移出这2个事件往往都是同时使用的，因此我们必须分别对“鼠标移入”和“鼠标移出”这2个事件分别定义。
但是在jQuery中，我们可以使用hover()方法一次性地定义这2个事件，这就是所谓的合成事件。
hover事件就是鼠标悬停事件。此外，你还可以额外传递给事件处理函数一些数据。
$().hover(fn1,fn2)
说明：
参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。
示例：

$(function () {
            $("h3").hover(function () {
                $("#content").css("display","block");
            }, function () {
                $("#content").css("display", "none");
            });
        })
// 鼠标移入、移出链接时，都去掉下划线
$("a").hover( function(event){
    $(this).css("textDecoration", "none");  
} );

hover()方法，准确来说是替代jQuery中的mouseenter()和mouseleave()，而不是替代mouseover()和mouseout()。

一次事件

在jQuery中，我们可以使用one()方法为所选元素绑定一个“只触发一次”的处理函数。
$().one(type , fn)
说明：

• type表示事件类型，例如单击事件是“click”，双击事件是“dblclick”，以此类推。
• fn表示事件的处理函数。
  示例：

  $(function () {
              $("#btn").one("click", function () {
                  alert("只能弹出一次！");
              });
          })

分析：
使用one()方法为按钮绑定了一个“只触发一次”的click事件。当我们第一次点击按钮之后会弹出对话框，但是第二次点击按钮就不会有任何反应。

浏览器事件

主要用于浏览器Window对象的事件。

resize()

resize事件会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。
$().resize( [ [ data ,] handler ] )

• data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler 可选/Function类型指定的事件处理函数。
  参数handler中的this指向当前DOM元素。resize()还会为handler传入一个参数：表示当前事件的Event对象。

  $(window).resize( function(){
      alert("不建议调整窗口大小!");
  } );
  
  // 触发window对象的resize事件
  // $(window).resize( );

scroll()

scroll事件会在元素的滚动条位置发生改变时触发。该事件一般仅适用于window对象或其他可滚动元素(一般会出现滚动条)。
$().scroll( [ [ data ,] handler ] )

• data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler 可选/Function类型指定的事件处理函数。
  参数handler中的this指向当前DOM元素。resize()还会为handler传入一个参数：表示当前事件的Event对象。

  $(window).scroll( function(event){
      $("#msg").append( $(this).scrollTop() + '<br>' );
  } );
  
  // 触发window对象的scroll事件
  // $(window).scroll( );
  //html代码：<div id="msg" style="height: 3000px;" ></div>

error()

error事件会在js发生错误或资源加载失败时触发。该事件主要用于window对象、等元素。
$().error( [ data ,] handler )

• data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler 可选/Function类型指定的事件处理函数。
  参数handler中的this指向当前DOM元素。resize()还会为handler传入一个参数：表示当前事件的Event对象。

  //html代码：<img src="http://www.365mini.com/static/image/invalid.png" alt="回到顶部" />
  
  //javascript代码
  $("img").error( function(){
      alert( "图片加载失败!" );
  } );
  
  var newImageURL = "http://www.365mini.com/static/image/backTop.png";
  
  // 图片加载失败时，重新加载新的图片URL
  $("img").error( newImageURL, function(event){
      this.src = event.data;
  } );

bind()函数

bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。

执行bind()时，事件处理函数会绑定到每个匹配元素上。因此你使用bind()为所有button元素绑定了click事件，是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素，绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效，请使用on()、delegate()、live()等事件函数(尽量优先使用靠前的事件函数)。

此外，你可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过bind()绑定的事件，请使用unbind()函数。

bind()函数主要有以下两种形式的用法：
用法一：
jQueryObject.bind( events [, data ], handler )
用法二：jQuery 1.4.3 新增支持该用法。
jQueryObject.bind( events [, data ] [, isDefaultBubble ] )
用法三：jQuery 1.4 新增支持该用法。
jQueryObject.bind( eventsMap )

• events: String类型 一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
• data: 可选/任意类型 触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler: Function类型 指定的事件处理函数。
• isDefaultBubble: 可选/Boolean类型 指定触发事件时，是否允许元素的默认行为和事件冒泡。默认为true。
• eventsMap: Object类型 一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
• 参数handler中的this指向当前DOM元素。bind()还会为handler传入一个参数：表示当前事件的Event对象。
• 参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如submit(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。
• 参数isDefaultBubble用于指示是否允许元素的默认行为和事件冒泡。如果该值为false，它将阻止元素的默认行为(例如：触发click事件的链接的默认跳转行为，触发submit事件的表单的默认提交行为)和事件的冒泡传递。

  //html代码
  <div id="n1">
      <p id="n2"><span>CodePlayer</span></p>
      <p id="n3"><span>专注于编程开发技术分享</span></p>
      <em id="n4">http://www.365mini.com</em>
  </div>
  <p id="n5">Google</p>
  //javascript代码
  //为div中的所有p元素的click事件绑定事件处理函数
  //只有n2、n3可以触发该事件
  $("div p").bind("click", function(){
  // 这里的this指向触发点击事件的p元素(Element)
      alert( $(this).text() );
  });
  
  var obj = { id: 5, name: "王五" };
  
  //为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj
  // 附加数据可以是任意类型
  $("#n5").bind("mouseenter mouseleave", obj, function(event){
      var $me = $(this);
      var obj = event.data; // 这就是传入的附加数据
      if( event.type == "mouseenter"){
          $me.html( "你好，" + obj.name + "!");
      }else if(event.type == "mouseleave" ){
          $me.html( "再见，" + obj.name + "!");      
      }           
  } );

参数events还支持为事件类型附加额外的命名空间。当为同一元素绑定多个相同类型的事件处理函数时。使用命名空间，可以在触发事件、移除事件时限定触发或移除的范围。

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}

var $p = $("p");

// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.bind( "click.foo.bar", clickHandler );

// B：为所有p元素绑定click事件，定义在test命名空间下
$p.bind( "click.test", clickHandler );

var $n2 = $("#n2");

// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")

// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")

bind()函数的参数eventsMap是一个对象，可以”属性-值”的方式指定多个”事件类型-处理函数”。对应的示例代码如下：

var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};

//为n5绑定mouseenter mouseleave两个事件
$("#n5").bind( eventsMap );

unbind()函数

unbind()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。
unbind()函数主要用于解除由bind()函数绑定的事件处理函数。

unbind()函数主要有以下两种形式的用法：
用法一：
jQueryObject.unbind( [ events [, handler ]] )
移除当前匹配元素的events事件绑定的事件处理函数handler。
用法二：
jQueryObject.unbind( eventObject )
为指定事件处理函数传入的Event对象，用于移除对应的事件处理函数。

• events: 可选/String类型 一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
• handler: 可选/Function类型指定的事件处理函数。
  eventObject Object类型一个Event对象，用于移除传入该对象的事件处理函数。

  //html
  <input id="btn1" type="button" value="点击1" />
  <input id="btn2" type="button" value="点击2" />
  <a id="a1" href="#">CodePlayer</a>
  
  //javascript
  function btnClick1(){
      alert( this.value + "-1" );
  }
  function btnClick2(){
      alert( this.value + "-2" );
  }
  var $buttons = $(":button");
  
  // 为所有button元素的click事件绑定事件处理函数btnClick1
  $buttons.bind( "click", btnClick1 );
  
  // 为所有button元素的click事件绑定事件处理函数btnClick2
  $buttons.bind( "click", btnClick2 );
  
  // 移除为所有button元素的click事件绑定的事件处理函数btnClick2
  // 点击按钮，只执行btnClick1
  $buttons.unbind("click", btnClick2);

delegate()和undelegate()

delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。
即使是执行delegate()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。
从jQuery 1.7开始，请优先使用事件函数on()替代该函数。

undelegate()函数用于移除元素上绑定的一个或多个事件的事件处理函数。
undelegate()函数主要用于解除由delegate()函数绑定的事件处理函数。

用法

jQueryObject.delegate( selector , events [, data ], handler )
jQueryObject.undelegate( [ selector , events [, handler ]] )
jQueryObject.delegate( selector, eventsMap )
jQueryObject.undelegate( selector , eventsMap )

• selector: String类型 一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
• events: String类型 一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus click”、”keydown.myPlugin”。
• data: 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
• handler: Functidelegate类型指定的事件处理函数。
• eventsMap: Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。

  //html
  <input id="btn1" type="button" value="点击1" />
  <input id="btn2" type="button" value="点击2" />
  <a id="a1" href="#">CodePlayer</a>
  
  //javascript
  function btnClick1(){
      alert( this.value + "-1" );
  }
  function btnClick2(){
      alert( this.value + "-2" );
  }
  var $body = $("body");
  
  // 在body元素上为所有button元素的click事件绑定事件处理函数btnClick1
  $body.delegate( ":button", "click", btnClick1 );
  
  //在body元素上为所有button元素的click事件绑定事件处理函数btnClick2
  $body.delegate( ":button", "click", btnClick2 );
  
  //为所有a元素绑定click、mouseover、mouseleave事件
  $body.delegate( "a", "click mouseover mouseleave", function(event){
      if( event.type == "click" ){
          alert("点击事件");
      }else if( event.type == "mouseover" ){
          $(this).css("color", "red");
      }else{
          $(this).css("color", "blue");       
      }
  });
  
  //移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
  //点击按钮，只执行btnClick1
  $body.undelegate(":button", "click", btnClick2);

trigger()函数

trigger()函数用于在每个匹配元素上触发指定类型的事件。
使用该函数可以手动触发执行元素上绑定的事件处理函数，也会触发执行该元素的默认行为。

以表单元素<form>为例，使用trigger("submit")可以触发该表单绑定的submit事件，也会执行表单submit事件的默认行为——表单提交操作。
链接标签<a>的trigger(“click”)是一个特例，不会触发链接click事件的默认行为——跳转到对应链接的操作，点此查看相关详情。
从jQuery 1.3开始，trigger()函数触发的事件还支持事件冒泡，可以冒泡传递到DOM树上。
用法
在每个匹配元素上触发指定类型(events)的事件，并可为事件处理函数传入额外的参数(extraArguments)。
jQueryObject.trigger( events [, extraArguments ] )
为指定事件处理函数传入的Event对象(eventObject)，用于触发执行对应的事件处理函数，并可为事件处理函数传入额外的参数(extraArguments)。
jQueryObject.trigger( eventObject [, extraArguments ] )

//html
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>
//javascript
var $log = $("#log");
function handler( event, arg1, arg2 ){
    var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2;
    $log.append( html );
}
var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );

// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );

// 触发所有button的click事件
$buttons.trigger("click"); 
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined
*/
$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined
*/

triggerHandler()函数

triggerHandler()函数用于在每个匹配元素上触发指定类型的事件。

该函数的作用于trigger()函数相似，但triggerHandler()函数具有以下例外情况：

• triggerHandler()不会触发执行元素的默认行为(例如链接click事件默认的跳转行为，表单submit事件默认的提交行为)。
• triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。
• triggerHandler()触发的事件不会在DOM树中冒泡，因此事件不会冒泡传递到它的任何祖辈元素。
• triggerHandler()的返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身。
  语法
  jQueryObject.triggerHandler( events [, extraArguments ] )
• events: String类型 指定的事件类型和可选的命名空间，例如”click”、”focus”、”keydown.myPlugin”。
• extraArguments: 可选/Object类型 为事件处理函数传入的额外参数。如果要传入多个参数，请以数组方式传入。
• triggerHandler()函数会为触发执行的事件处理函数传入一个默认参数，也就是表示当前事件的Event对象。
• 参数extraArguments用于为事件处理函数传入更多额外的参数。如果extraArguments是数组形式，则每个元素都将充当函数的参数。
• triggerHandler()函数的返回值为任意类型，返回触发执行的事件处理函数的返回值。

  //html
  <input id="btn1" type="button" value="点击1" />
  <input id="btn2" type="button" value="点击2" />
  <a id="a1" href="#">CodePlayer</a>
  <div id="log"></div>
  //javascript
  var $log = $("#log");
  function handler( event, arg1, arg2 ){
      var html = '<br>触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2;
      $log.append( html );
  }
  var $buttons = $(":button");
  
  // 为所有button元素的click事件绑定事件处理函数
  $buttons.bind( "click", handler );
  
  // 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
  $("a").bind( "click mouseover mouseleave", handler );
  
  // 触发btn1的click事件
  // 虽然$buttons匹配两个button元素，但只会触发第一个匹配元素的click事件
  $buttons.triggerHandler("click");
  /*(追加文本)
  触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
  */
  
  $("#btn2").triggerHandler("click", "CodePlayer");
  /*(追加文本)
  触发元素#btn2的[click]事件，额外的函数参数为:CodePlayer, undefined
  */
  
  // arg1 = "张三"， arg2 = 20
  $("a").triggerHandler("mouseover", ["张三", 20 ] );
  /*(追加文本)
  触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
  */
  
  $("a").triggerHandler("mouseleave", { name: "张三", age: 18 } );
  /*(追加文本)
  触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
  */

参考资源

1.jQuery事件方法：http://www.365mini.com/page/tag/jquery-event-methods
2.jQuery Event对象的属性和方法：http://www.365mini.com/page/tag/jquery-event-object