jQuery | 事件方法完整参考

概述

jQuery 是一个快速、简洁的 JavaScript 库，提供了众多强大且易用的功能，用于操作 HTML 文档、处理事件和执行动画等。本文是 jQuery 事件方法的完整参考，旨在帮助开发人员更好地了解和应用 jQuery 中的事件方法。

事件方法列表

下面是 jQuery 中常用的事件方法。

事件绑定

.click()

绑定或触发元素的点击事件。

$('#element').click(function() {
  // 点击事件处理程序
});

.dblclick()

绑定或触发元素的双击事件。

$('#element').dblclick(function() {
  // 双击事件处理程序
});

.hover()

绑定或触发元素的鼠标进入和离开事件。

$('#element').hover(function() {
  // 鼠标进入事件处理程序
}, function() {
  // 鼠标离开事件处理程序
});

.on()

基于事件委托的事件绑定/触发方法，适用于动态添加的元素。

$(document).on('click', '#element', function() {
  // 事件处理程序
});

事件触发

.trigger()

触发指定元素上的某个事件。

$('#element').trigger('click');

.triggerHandler()

触发指定元素上的某个事件，并返回事件处理程序的返回值。

var returnValue = $('#element').triggerHandler('click');

事件处理

.off()

移除元素上指定类型的事件处理程序。

$('#element').off('click');

.one()

绑定或触发元素的事件处理程序，只会执行一次。

$('#element').one('click', function() {
  // 事件处理程序
});

.delegate()

为元素的子元素绑定或触发指定类型事件的事件处理程序。

$('#element').delegate('.child-element', 'click', function() {
  // 事件处理程序
});

.undelegate()

移除元素上通过 .delegate() 方法绑定的事件处理程序。

$('#element').undelegate('.child-element', 'click');

事件属性

.data()

在元素上存储数据，通过事件对象访问。

$('#element').data('key', 'value');
var value = event.data.key;

.prop()

获取或设置元素的属性。

var value = $('#element').prop('disabled');
$('#element').prop('disabled', true);

结论

本文介绍了 jQuery 中常用的事件方法，包括事件绑定、事件触发、事件处理和事件属性等。希望这个完整参考对您在开发过程中更好地理解和应用 jQuery 事件方法有所帮助。详细的 API 文档可在 jQuery 官方文档 中找到。