jquery方法详解--bind(type, [data], fn)

转自：http://www.zhufengpeixun.cn/jquery/bind_type_data_fn.html

bind(type, [data], fn)  返回值：:jQuery

概述

为每个匹配元素的特定事件绑定事件处理函数。

.bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是可以作为type参数传递进来的。

jQuery还提供了一些绑定这些标准事件类型的简单方式，比如.click()用于简化.bind('click')。一共有以下这些：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

任何作为type参数的字符串都是合法的；如果一个字符串不是原生的JavaScript事件名，那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发，但可以通过使用.trigger()或者.triggerHandler()在其他代码中手动触发。

如果type参数的字符串中包含一个点(.)字符，那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说，如果执行 .bind('click.name', handler) ，那么字符串中的 click 是事件类型，而字符串 name 就是命名空间。命名空间允许我们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind()来获取更多信息。

当一个事件传到一个元素上，所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件处理函数，总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后，事件继续沿着普通的事件冒泡途径上浮。

.bind()最基本的用法是：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

这个代码能使ID为foo的元素响应click事件。当用户点击元素内部之后，就会弹出一个警告框。

多个事件

依次可以绑定多个事件类型，每个事件类型用空格分隔：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

这个代码让一个<div id="foo">元素（初始情况下class没有设置成entered），当鼠标移进去的时候，在class中加上entered，而当鼠标移出这个div的时候，则去除这个class值。

在jQuery 1.4中，我们也可以通过传入一个映射对来一次绑定多个事件处理函数：

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

事件处理函数

fn这个参数接受一个回调函数，就像先前展示的那样。在这个事件处理函数内部，this指向这个函数绑定的DOM元素。如果要让这个元素变成jQuery对象来使用jQuery的方法，可以把这个对象传入 $() 重新封装。比如说：

$('#foo').bind('click', function() {
  alert($(this).text());
});

这个代码执行之后，当用户点击了ID为foo的元素内部之后，他的文本内容就会出现在一个警告框中。

事件对象

fn这个参数的回调函数还可以接受一个参数。当这个函数被调用时，一个JavaScript事件对象会作为一个参数传进来。

这个事件对象通常是没有必要且可以省略的参数，因为当这个事件处理函数绑定的时候就能够明确知道他在触发的时候应该做些什么，通常就已经可以获得充分的信息了。然而在有些时候，在事件初始化的时候需要获取更多关于用户环境的信息。可以参考完整的关于事件对象的内容（英文）。

在事件处理函数内返回false就等价于执行事件对象上的.preventDefault()和.stopPropagation()。

可以像这样在事件处理函数内使用事件对象：

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});

注意，这个参数添加到了一个匿名函数上。这个代码可以让用户在点击ID为foo的元素时，报告鼠标点击时相对于页面的坐标。

传递事件数据

可选的第二个参数data通常用的很少。如果提供了这个参数，那么我们就能把一些附加信息传递给事件处理函数了。这个参数有个很好的用处，就是处理闭包带来的问题。比如我们有两个事件处理函数要指向同一个内部变量：

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});

由于这两个函数在他们各自的环境中都有message，所以触发时显示的消息都是 Not in the face! 。变量值被改变了。为了回避这个问题，我们可以把message变量作为data参数传递进去：

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});

这时在函数内部不再直接指向这个变量了；取而代之的是按值传递给了data参数，他能保持绑定事件时的值。第一个函数现在会显示Spoon!，而第二个则显示Not in the face!

注意，如果这个对象按引用传递给了函数，那么将会使情况变得极其复杂。

另外，可以参考.trigger()方法来了解如何在事件触发时传递数据，而不是在事件绑定的时候传递数据。

在jQuery 1.4中，不再支持把数据以及事件附加到一个object、embed或者applet元素上面。因为当往Java applet元素上附加数据时，会触发一个严重错误警告。

参数

typeString

含有一个或多个事件类型的字符串，比如"click"或"submit"，还可以是自定义事件名。

data (可选)Object

作为event.data属性值传递给事件对象的额外数据对象

fnFunction

绑定到每个匹配元素的事件上面的处理函数

示例

描述:

当每个段落被点击的时候，弹出其文本。

jQuery 代码:

$("p").bind("click", function(){
  alert( $(this).text() );
});

描述:

你可以在事件处理之前传递一些附加的数据。

jQuery 代码:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

描述:

通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind("submit", function() { return false; })

描述:

通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind("submit", function(event){
  event.preventDefault();
});

描述:

通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});