jQuery事件处理

在浏览器交互过程中特定事件发生时脚本会进行相应的处理， jQuery 会针对不同的事件进行特定的处理。

浏览器检测到自身发生变化或遇到错误时，抛出的事件称为浏览器事件。比如浏览器页面内容发生滚动时会触发 scroll 事件，浏览器出错会触发 error 事件。可分别对应事件绑定相应的事件处理函数，这样当事件发生时就会调用此函数。

//当一个image标签指定要加载的图片不存在时，产生错误
$("<img>", {
  "src" : "not/an/bb.png",
  "alt" : "no image"
})
.error(function() {
  console.log("图片无法加载");
})
.appendTo("body");

//当滚动浏览页面内容时，触发 scroll 事件
$(window)
  .scroll(function() {
    console.log("窗口滚动");
  });

通常在页面中的 javascript 会在页面加载完成后才能开始执行，为了防止脚本过早执行，而页面中的元素还未加载而导致异常，通常会使用 ready 函数来保证等 DOM 准备好可以接受处理时才触发进行处理，通常会把整个脚本做成一个回调函数传递给 ready 函数。

$(document).ready(function() {
  //脚本
});

在浏览器中可以触发很多事件，jQuery 提供很多快捷方法对应相应的事件，常见的事件有 click 、 blur 、 focus 、 mousedown 、 mouseup 、submit 等，给对应的元素绑定事件及其处理函数可在事件发生时进行相应的响应。

bind()

可以给元素绑定事件处理函数，可最多接受三个参数，第一个参数为事件名，第二个参数为事件处理函数，可以一次为多个事件绑定同一个事件处理函数，也可以为不同的事件绑定不同的事件处理函数。如果为多个事件绑定同一个事件处理函数，在第一个参数中用空格分隔不同的事件。如果要为不同的事件绑定不同的事件处理函数，需要给bind方法传递一个 JSON 对象。另外可接受的第三个参数用于向事件处理函数传递数据，这个参数是一个 JSON 对象，该参数的数据会绑定到事件处理函数的 event 对象，从而完成数据的传递。

//给段落绑定 click 事件，点击段落输出段落被点击信息
$("p").bind("click", function() {
  console.log("段落被点击");
});

//给段落绑定 click, mouseover 事件，并输出事件发生信息
$("p").bind("click mouseover", function() {
  console.log("事件发生");
});

//给段落绑定 click, mouseover 事件，并输出不同的信息
$("p")
  .bind({
    "click" : function() {
      console.log("Click Event");
    },
    "mouseover" : function() {
      console.log("MouseOver Event");
    }
  });

//给事件处理函数传递数据
var Msg = "message 1";
$("#bar").bind("click", {m:Msg}, function(event) {
  console.log(event.data.m);
});

var Msg = "message 2";
$("p.foo").bind("click", {m:Msg}, function(event) {
  console.log(event.data.m);
});

unbind()

可以使用 unbind 方法移除元素的事件，如果不带参数调用该方法，则会移除当前元素的所有绑定事件，如果需要指定移除那个事件，就把该事件名作为第一个参数传递给 unbind 方法，如果要移除指定的事件处理函数，就把准备移除的事件处理函数作为第二个参数传递给 unbind 方法。

//删除绑定在段落中的所有事件
$("p").unbind();

//仅删除绑定在段落中的click事件
$("p").unbind("click");

//删除指定事件处理函数
var fun1 = function() {
  console.log("event one triggered!");
},
    fun2 = function() {
  console.log("another one event!");
};
$("#bar").bind("click",fun1)
         .bind("click",fun2)
         .trigger("click")
         .unbind("click", fun1);

live() 和 die()

live 和 die 跟 bind 和 unbind 类似，也是负责为元素绑定事件和事件处理函数，所不同的是能为动态添加到 DOM 中的匹配元素绑定事件和事件处理函数，用 live 绑定的事件处理和事件处理函数必须使用 die 来解除绑定， 在 jQuery 1.7 以后 live 以过时，应该使用on方法。

one()

跟bind功能唯一的区别就是使用one绑定的事件及事件处理函数是一次性的，事件触发后自动解除绑定，其他功能跟bind相同。

trigger()

触发事件使用trigger，接受两个参数，第一个参数是被触发的事件名，第二个参数可选，为数组类型，用于给事件处理函数传递数据。

//给 id = bar 的元素绑定 click 事件，然后触发
$("#bar").bind("click", function() {
  console.log("Clicked!");
}).trigger("click");

//给事件处理函数传递数据
var notice = "I was triggered!";
$("#bar").bind("click", function(event, msg) {
  var log = msg || "I was clicked!";
  console.log(log);
}).trigger("click", [notice]);