.bind()

Categories: Events > Event Handler Attachment

.bind( eventType, [ eventData ], handler(eventObject) ) 返回： jQuery

描述： 为一个元素绑定一个处理事件。

version added: 1.0.bind( eventType, [ eventData ], handler(eventObject) )

eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。

eventData将要传递给事件处理函数的数据映射。

handler(eventObject)每当事件触发时执行的函数。
version added: 1.4.3.bind( eventType, [ eventData ], false )

eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。

eventData将要传递给事件处理函数的数据映射。

false第三个参数设置为false将绑定一个函数，防止默认事件，阻止事件冒泡。
version added: 1.4.bind( events )

events一个或多个JavaScript事件类型和函数的数据映射来执行他们。

.bind()方法是将一个文件绑定行为的主要方法。所有JavaScript的事件类型，比如focus, mouseover, 和 resize被允许设置为eventType参数（beforeunload和error的事件对window对象的使用非标准约定和不被jQuery支持;直接用来代替为window对象绑定一个处理程序。）。

jQuery库提供了标准的事件类型绑定快捷方法,比如.bind('click')的快捷方法.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。

对于eventType任何字符串是合法的;如果该字符串不是一个原生的JavaScript事件名称，那么以自定义事件方式绑定处理程序。这些事件是不会被浏览器调用，但可以通过其他JavaScript代码使用.trigger()或.triggerHandler() 来手动触发。

如果eventType参数字符串包含一个点（ . ）字符，那么该事件被命名空间。这个点（ . ）字符从它的命名空间分隔出的事件。例如，在调用.bind('click.name', handler) ，字符串click是事件类型，而字符串name是命名空间。命名空间可以让我们解除或绑定一些事件，而不会影响他人。见.unbind()获取更多信息。

当事件到达一个元素，绑定到该元素的类型的所有事件处理程序被执行。如果有多个处理程序登记，他们将永远在其中按固定的次序执行。所有处理程序执行完成后，事件继续沿着正常的事件传播路径。

.bind()一个基本的用法：

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

此代码将使元素ID为foo响应click事件。当在用户点击这个元素之后，警报将显示。

Multiple Events

多个事件类型可以通过用空格隔开一次性绑定：

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

在<div id="foo">（当最初它不会有"entered"样式类时）上的这个效果是当鼠标进入<div>时增加"entered"样式类，鼠标离开时移除这个样式类。

在jQuery 1.4中，我们可以通过传递一个事件类型/处理函数的数据映射来绑定多个事件处理程序：

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

Event Handlers

handler的参数需要一个回调函数，如上所述。在处理函数中，关键字this指的是DOM元素受处理程序的约束。为了该元素在jQuery中使用，它可以通过正常的$()函数。例如：

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

执行此代码后，当用户点击里面ID为foo的元素，它的文本内容将被显示为警告。

在jQuery 1.4.2中，重复的事件处理程序可以绑定到一个元素，而不是被丢弃。例如：

function test(){ alert("Hello"); }
$("button").click( test );
$("button").click( test );

上述按钮被点击时会产生两个警报。

在jQuery 1.4.3中，你现在可以通过在事件处理程序的地方使用'false'参数。这将绑定的事件处理程序的等价于： function(){ return false; }。此功能通过.unbind( eventName, false )可去除在以后调用。

The Event object

在handler回调函数里还可以带参数。当函数被调用时，JavaScript事件对象（event）将作为第一个参数被传递。

事件对象往往是不必要的可以省略的参数，因为通常情况下提供足够的处理程序时必然要确切地知道需要做什么处理程序时被触发。然而，有时就有必要收集更多有关用户在事件被启动时环境信息。查看所有的事件对象。

从一个处理函数返回false等效于调用事件对象中的两个.preventDefault()和.stopPropagation()。

Using the event object in a handler looks like this:

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

请注意，参数添加到匿名函数。此代码将使在点击ID为foo的元素的时候 alert光标在页面上的坐标位置。

Passing Event Data

可选的eventData参数不常用。当提供时，这种参数允许我们给处理函数传递额外的信息。一个方便的使用这个参数来解决由于关闭造成的问题。例如，假设我们有两个事件处理函数都引用了相同的外部变量：

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!。为了回避这个问题，我们可以通过使用eventData参数中的消息：

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);
});

这一次该变量没有提供给处理函数;相反，变量通过值传递给eventData ，修复了该事件中的值。第一个处理程序，现在将显示Spoon!而第二个会提醒Not in the face!。

请注意，对象是通过参数传递给函数的，这种情况进一步复杂化。

如果eventData参数存在，这是第二个传递给.bind()的参数;如果没有更多的数据需要发送到处理程序，然后回调函数传递作为第二个和最后一个参数。

见.trigger()方法参考将数据传递到处理函数，在事件发生的时间而不是在处理程序的结束。

As of jQuery 1.4 we can no longer attach data (and thus, events) to object, embed, or applet elements because critical errors occur when attaching data to Java applets.

Examples:

Example: Handle click and double-click for the paragraph. Note: the coordinates are window relative, so in this case relative to the demo iframe.

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer; 
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Click or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});

</script>

</body>
</html>

Demo:

Example: To display each paragraph's text in an alert box whenever it is clicked:

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

Example: You can pass some extra data before the event handler:

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

Example: Cancel a default action and prevent it from bubbling up by returning false:

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

Example: Cancel only the default action by using the .preventDefault() method.

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

Example: Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.

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

Example: Bind custom events.

<!DOCTYPE html>
<html>
<head>
  <style>
p { color:red; }
span { color:blue; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>

$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});

</script>

</body>
</html>

Demo:

Example: Bind multiple events simultaneously.

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

.bind()

.bind( eventType, [ eventData ], handler(eventObject) ) 返回： jQuery

version added: 1.0.bind( eventType, [ eventData ], handler(eventObject) )

version added: 1.4.3.bind( eventType, [ eventData ], false )

version added: 1.4.bind( events )

Multiple Events

Event Handlers

The Event object

Passing Event Data

Examples:

Example: Handle click and double-click for the paragraph. Note: the coordinates are window relative, so in this case relative to the demo iframe.

Demo:

Example: To display each paragraph's text in an alert box whenever it is clicked:

Example: You can pass some extra data before the event handler:

Example: Cancel a default action and prevent it from bubbling up by returning false:

Example: Cancel only the default action by using the .preventDefault() method.

Example: Stop an event from bubbling without preventing the default action by using the .stopPropagation() method.

Example: Bind custom events.

Demo:

Example: Bind multiple events simultaneously.