jQuery bind() 方法

jQuery 的 bind() 方法用于为一个或多个元素添加一个或多个事件处理程序，这些事件处理程序会在指定的事件发生时执行。

语法

$(selector).bind(event, data, function)

• 参数：
  • event 必需，表示要绑定的事件名称，可以是自定义事件，也可以是 DOM 事件，如 click、submit 等。
  • data 可选，表示传递给事件处理程序的数据，可以是字符串、数组、对象等。
  • function 必需，表示要绑定的事件处理程序，可以是内置函数、自定义函数等。

示例

1. 为按钮添加 click 事件

下面的代码演示了如何为一个按钮添加 click 事件：

<button id="btn">点击我</button>
<script>
  $('#btn').bind('click', function() {
    alert('按钮被点击了');
  });
</script>

2. 为输入框添加键盘事件

下面的代码演示了如何为一个输入框添加 keydown 事件，当键盘输入时会触发：

<input type="text" id="input">
<script>
  $('#input').bind('keydown', function() {
    console.log('键盘输入了');
  });
</script>

3. 传递数据给事件处理程序

下面的代码演示了如何传递数据给事件处理程序：

<button id="btn">点击我</button>
<script>
  $('#btn').bind('click', {name: '张三', age: 18}, function(event) {
    alert('您好，' + event.data.name + '，您的年龄是' + event.data.age + '岁');
  });
</script>

4. 为多个元素添加事件

下面的代码演示了如何为多个元素添加事件：

<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script>
  $('.btn').each(function() {
    $(this).bind('click', function() {
      alert($(this).text() + '被点击了');
    });
  });
</script>

注意事项

• 在 jQuery 1.7 版本之后，推荐使用 on() 方法代替 bind() 方法。
• 使用 bind() 方法时，可以为元素添加多个事件处理程序，它们会按顺序执行。
• 使用 unbind() 方法可以移除一个或多个事件处理程序。