当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .bind()用法及代码示例


用法 
.bind( eventType [, eventData ], handler ) => jQuery

不推荐使用的版本：3.0

说明：将处理程序附加到元素的事件。

  • 添加的版本：1.0.bind( eventType [, eventData ], handler )

    • eventType
      类型：String
      包含一种或多种 DOM 事件类型的字符串，例如 "click" 或 "submit," 或自定义事件名称。
    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.4.3.bind( eventType [, eventData ] [, preventBubble ] )

    • eventType
      类型：String
      包含一种或多种 DOM 事件类型的字符串，例如 "click" 或 "submit," 或自定义事件名称。
    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • preventBubble
      类型：Boolean
      将第三个参数设置为 false 将附加一个阻止默认操作发生并阻止事件冒泡的函数。默认值为真。

  • 添加的版本：1.4.bind( events )

    • events
      类型：Object
      一个对象，包含一个或多个 DOM 事件类型和为它们执行的函数。

从 jQuery 3.0 开始，.bind() 已被弃用。自 jQuery 1.7 起，它已被用于将事件处理程序附加到文档的 .on() 方法取代，因此不鼓励使用它。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素 must exist 在调用 .bind() 时发生。如需更灵活的事件绑定，请参阅 .on() 中关于事件委托的讨论。

eventType 的任何字符串都是合法的；如果字符串不是本机 DOM 事件的名称，则处理程序将绑定到自定义事件。这些事件永远不会被浏览器调用，但可以使用 .trigger() 或 .triggerHandler() 从其他 JavaScript 代码手动触发。

如果 eventType 字符串包含句点 (.) 字符，则事件是命名空间的。句点字符将事件与其命名空间分开。例如，在调用 .bind( "click.name", handler ) 中，字符串 click 是事件类型，字符串 name 是命名空间。命名空间允许我们解除绑定或触发某种类型的某些事件，而不会影响其他事件。有关更多信息，请参阅.unbind() 的讨论。

有一些标准浏览器事件的速记方法，例如 .click() ，可用于附加或触发事件处理程序。有关速记方法的完整列表，请参阅events category。

当一个事件到达一个元素时，所有绑定到该元素的事件类型的处理程序都会被触发。如果注册了多个处理程序，它们将始终按照它们被绑定的顺序执行。在所有处理程序都执行后，事件将沿着正常的事件传播路径继续。

.bind() 的基本用法是：

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

此代码将导致 ID 为 foo 的元素响应 click 事件。此后，当用户在此元素内单击时，将显示警报。

多个事件

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

$( "#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
  }
});

事件处理程序

handler 参数采用回调函数，如上所示。在处理程序中，关键字this 指的是处理程序绑定到的 DOM 元素。要在 jQuery 中使用该元素，可以将其传递给普通的 $() 函数。例如：

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

执行此代码后，当用户在 ID 为 foo 的元素内单击时，其文本内容将显示为警报。

从 jQuery 1.4.2 开始，重复事件处理程序可以绑定到元素而不是被丢弃。这在使用事件数据函数时很有用，或者当其他唯一数据驻留在事件处理函数周围的闭包中时。

在 jQuery 1.4.3 中，您现在可以传入 false 来代替事件处理程序。这将绑定一个等同于：function(){ return false; } 的事件处理程序。以后可以通过调用 .unbind( eventName, false ) 来删除此函数。

事件对象

handler 回调函数也可以带参数。当函数被调用时，事件对象将被传递给第一个参数。

事件对象通常是不必要的并且参数被省略，因为当处理程序必须确切知道触发处理程序时需要做什么时，通常有足够的上下文可用。但是，有时有必要在事件开始时收集有关用户环境的更多信息。 View the full Event Object 。

从处理程序返回 false 等效于在事件对象上同时调用 .preventDefault() 和 .stopPropagation()。

在处理程序中使用事件对象如下所示：

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

注意添加到匿名函数的参数。此代码将导致单击 ID foo 的元素以报告单击时鼠标光标的页面坐标。

传递事件数据

可选的eventData 参数不常用。提供时，此参数允许我们将附加信息传递给处理程序。此参数的一个方便用途是解决由闭包引起的问题。例如，假设我们有两个事件处理程序都引用同一个外部变量：

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

因为处理程序是两者都有的闭包message在他们的环境中，两者都会显示消息不是在脸上！触发时。变量的值已更改。为了回避这一点，我们可以在使用中传递消息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 );
});

这次在处理程序中不直接引用变量；相反，变量被传入by value通过eventData，它固定事件绑定时的值。现在将显示第一个处理程序勺子！而第二个会提醒不是在脸上！

请注意，对象被传递给函数 by reference ，这使这种情况更加复杂。

如果存在eventData，则它是.bind() 方法的第二个参数；如果不需要向处理程序发送其他数据，则回调作为第二个也是最后一个参数传递。

请参阅.trigger() 方法参考，了解在事件发生时而不是在绑定处理程序时将数据传递给处理程序的方法。

从 jQuery 1.4 开始，我们不能再将数据(以及事件)附加到对象、嵌入或小程序元素，因为在将数据附加到 Java 小程序时会发生严重错误。

注意：尽管在下一个示例中进行了演示，但不建议将处理程序绑定到两个click和dblclick相同元素的事件。触发的事件顺序因浏览器而异，有些会在触发之前接收两个点击事件dblclick其他只有一个。双击敏感度(检测为双击的两次单击之间的最长时间)可能因操作系统和浏览器而异，通常为 user-configurable。

例子：

句柄单击并双击该段落。注意：坐标是相对于窗口的，所以在这种情况下相对于演示 iframe。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
     background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.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>

演示：

要在每次单击时在警报框中显示每个段落的文本：

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

您可以在事件处理程序之前传递一些额外的数据：

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

通过返回 false 取消默认操作并防止其冒泡：

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

使用 .preventDefault() 方法仅取消默认操作。

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

使用 .stopPropagation() 方法在不阻止默认操作的情况下阻止事件冒泡。

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

绑定自定义事件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.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>

演示：

同时绑定多个事件。

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

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .bind()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。