jQuery | 事件方法完整参考

jQuery是一种JavaScript库，它简化了HTML文档遍历、事件处理、动画和AJAX等操作，为Web开发提供了便利。本文将介绍jQuery的事件方法。

1. 事件绑定方法

事件绑定方法用于绑定事件处理程序到特定元素上。

1.1. .bind()

绑定一个或多个事件处理程序。

$(selector).bind(event,[data],handler);

• selector: 元素选择器
• event: 事件类型
• data: 可选参数，传递给handler的额外数据
• handler: 事件处理程序

示例：

$(function() {
  $('#myButton').bind('click', function() {
    alert('Button clicked.');
  });
});

1.2. .on()

绑定一个或多个事件处理程序。

$(selector).on(event,[data],handler);

• selector: 元素选择器
• event: 事件类型
• data: 可选参数，传递给handler的额外数据
• handler: 事件处理程序

示例：

$(function() {
  $('#myButton').on('click', function() {
    alert('Button clicked.');
  });
});

1.3. .delegate()

为元素的子元素指定一个或多个事件处理程序。

$(selector).delegate(childSelector,event,[data],handler);

• selector: 元素选择器
• childSelector: 子元素选择器
• event: 事件类型
• data: 可选参数，传递给handler的额外数据
• handler: 事件处理程序

示例：

$(function() {
  $('#myDiv').delegate('p', 'click', function() {
    alert('Paragraph clicked.');
  });
});

1.4. .live()

为未来元素（动态添加的）绑定一个或多个事件处理程序。

$(selector).live(event,[data],handler);

• selector: 元素选择器
• event: 事件类型
• data: 可选参数，传递给handler的额外数据
• handler: 事件处理程序

示例：

$(function() {
  $('a').live('click', function() {
    alert('Link clicked.');
  });
});

2. 事件移除方法

事件移除方法用于移除事件处理程序。

2.1. .unbind()

移除一个或多个事件处理程序。

$(selector).unbind(event,[handler]);

• selector: 元素选择器
• event: 事件类型
• handler: 可选参数，要删除的事件处理程序。

示例：

$(function() {
  $('#myButton').bind('click', function() {
    alert('Button clicked.');
    $(this).unbind('click');
  });
});

2.2. .off()

移除一个或多个事件处理程序。

$(selector).off(event,[handler]);

• selector: 元素选择器
• event: 事件类型
• handler: 可选参数，要删除的事件处理程序。

示例：

$(function() {
  $('#myButton').on('click', function() {
    alert('Button clicked.');
    $(this).off('click');
  });
});

2.3. .undelegate()

为元素的子元素移除一个或多个事件处理程序。

$(selector).undelegate(childSelector,event,[handler]);

• selector: 元素选择器
• childSelector: 子元素选择器
• event: 事件类型
• handler: 可选参数，要删除的事件处理程序。

示例：

$(function() {
  $('#myDiv').undelegate('p', 'click');
});

2.4. .die()

移除为未来元素（动态添加的）绑定的一个或多个事件处理程序。

$(selector).die(event,[handler]);

• selector: 元素选择器
• event: 事件类型
• handler: 可选参数，要删除的事件处理程序。

示例：

$(function() {
  $('a').live('click', function() {
    alert('Link clicked.');
    $(this).die('click');
  });
});

3. 事件触发方法

事件触发方法用于手动触发事件处理程序。

3.1. .trigger()

手动触发事件处理程序。

$(selector).trigger(event,[data]);

• selector: 元素选择器
• event: 事件类型
• data: 可选参数，传递给事件处理程序的额外数据。

示例：

$(function() {
  $('#myButton').on('click', function() {
    alert('Button clicked.');
  });
  $('#myButton').trigger('click');
});

3.2. .triggerHandler()

手动触发事件处理程序，但不执行浏览器默认动作。

$(selector).triggerHandler(event,[data]);

• selector: 元素选择器
• event: 事件类型
• data: 可选参数，传递给事件处理程序的额外数据。

示例：

$(function() {
  $('#myButton').on('click', function(event) {
    alert('Button clicked.');
    event.preventDefault();
  });
  $('#myButton').triggerHandler('click');
});

参考资料：jQuery Events API Documentation