jQuery 事件

使用 jQuery 处理事件

jQuery 简化了响应网页上的用户交互和浏览器事件的过程。

什么是事件？

事件是在浏览器中发生的动作或情况，通常由用户或浏览器本身发起。你的代码可以“监听”这些事件，并在它们发生时执行函数（事件处理函数）。

可以把它想象成设置一个闹钟（监听事件）。当到达设定的时间（事件“触发”），闹钟响起（事件处理函数运行）。

常见示例包括：

• 点击按钮
• 将鼠标移到元素上方
• 按下键盘上的按键
• 提交表单
• 页面完成加载
• 滚动页面

以下是一些常见的 DOM 事件类别及具体事件：

鼠标事件： click (点击), dblclick (双击), mouseenter (鼠标进入), mouseleave (鼠标离开), mouseover (鼠标悬停), mouseout (鼠标移出), mousedown (鼠标按下), mouseup (鼠标释放), mousemove (鼠标移动) 键盘事件： keydown (键按下), keyup (键释放), keypress (字符键按下) 表单事件： submit (提交), change (改变), focus (获得焦点), blur (失去焦点), input (输入) 文档/窗口事件： load (加载), unload (卸载), ready (jQuery 特有，见下文), resize (调整大小), scroll (滚动)

on() 方法：推荐方法

在 jQuery 中附加事件处理函数的现代且最通用的方法是使用 .on() 方法。它为处理各种事件、多个事件以及动态添加的元素提供了灵活性。

基本语法：

// 为所有 <p> 元素附加一个 'click' 事件处理函数
$('p').on('click', function(event) {
  // 'this' 指的是被点击的那个特定的 <p> 元素
  $(this).hide();
  console.log('Paragraph clicked!', event);
});

你将事件名称（例如，‘click’，‘mouseenter’）作为第一个参数传递，将处理函数作为第二个参数传递。

附加多个事件处理函数：

你可以通过向 .on() 传递一个对象来附加多个事件的处理函数：

$('p').on({
  mouseenter: function() {
    $(this).css('background-color', 'lightgray');
  },
  mouseleave: function() {
    $(this).css('background-color', 'lightblue');
  },
  click: function() {
    $(this).css('background-color', 'yellow');
  }
});

等待 DOM 就绪：$(function() { ... });

在使用 jQuery 安全地操作 HTML 元素之前，你需要确保文档对象模型（DOM）已完全加载并准备就绪。尝试选择或修改尚未被浏览器解析的元素将会失败。

DOM 就绪后执行代码的标准和推荐方式是直接将一个函数传递给 jQuery 对象 $()：

$(function() {
  // 所有与 DOM 交互的 jQuery 代码都放在这里。
  // 这确保了在你的代码运行之前元素是可用的。
  console.log('DOM is ready!');

  // 示例：在 DOM 就绪后附加一个点击处理函数
  $('#myButton').on('click', function() {
    alert('Button clicked!');
  });
});

这是较旧的 $(document).ready(function() { ... }); 语法的简写形式，它仍然有效，但更冗长。

使用 .on() 的常见事件示例

虽然 .on() 是主要方法，但 jQuery 也提供了一些简写方法（如 .click()、.mouseenter() 等）以方便使用。这些简写方法本质上是 .on() 的包装器。以下是使用通常更受推荐的 .on() 方法的示例。

click 和 dblclick

响应元素上的单次或双次点击。

// 单次点击
$('#myButton').on('click', function() {
  console.log('Button single-clicked!');
});

// 双次点击
$('.editable-field').on('dblclick', function() {
  // 在双击时使字段可编辑
  $(this).prop('contenteditable', true);
});

mouseenter 和 mouseleave

当鼠标指针进入或离开元素的边界时触发。

$('#hover-area').on('mouseenter', function() {
  $(this).addClass('highlight'); // 鼠标悬停时添加 CSS 类
});

$('#hover-area').on('mouseleave', function() {
  $(this).removeClass('highlight'); // 鼠标离开时移除类
});

.hover() 简写方法

jQuery 提供了一个方便的 .hover() 方法，它结合了 mouseenter 和 mouseleave。它接受两个函数：第一个在 mouseenter 时运行，第二个在 mouseleave 时运行。

$('#hover-area').hover(
  function() { // mouseenter 处理函数
    $(this).addClass('highlight');
  },
  function() { // mouseleave 处理函数
    $(this).removeClass('highlight');
  }
);

mousedown 和 mouseup

当在元素上方按下或释放鼠标按钮时触发。

$('#draggable').on('mousedown', function() {
  console.log('Mouse button pressed down!');
  // 开始拖拽操作的逻辑可以放在这里
});

$('#draggable').on('mouseup', function() {
  console.log('Mouse button released!');
  // 结束拖拽操作的逻辑可以放在这里
});

focus 和 blur

通常用于表单元素。focus 在元素获得焦点时触发（例如，点击输入框），blur 在元素失去焦点时触发。

$('input[type="text"]').on('focus', function() {
  // 输入框获得焦点时高亮显示
  $(this).css('border-color', 'blue');
});

$('input[type="text"]').on('blur', function() {
  // 失去焦点时重置边框
  $(this).css('border-color', '');
  // 在失去焦点时执行验证
  console.log('Input lost focus, value is:', $(this).val());
});

submit

当表单被提交时触发（例如，通过点击提交按钮或按 Enter 键）。对于表单验证或通过 AJAX 提交数据至关重要。

$('#myForm').on('submit', function(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();

  console.log('Form submitted!');
  // 在这里添加验证逻辑
  // 示例：获取表单数据并通过 AJAX 发送
  // let formData = $(this).serialize();
  // $.post('/api/submit', formData, function(response) { ... });
});

keydown、keyup、keypress

响应键盘交互。keydown 在按下键时触发，keyup 在释放键时触发，keypress 通常在按下字符键时触发（行为在不同浏览器中可能有所差异；keydown 通常更可靠）。

$('input#searchBox').on('keyup', function(event) {
  console.log('键已释放:', event.key); // 记录按下的键
  if (event.key === 'Enter') {
    console.log('Search triggered by Enter key!');
    // 触发搜索逻辑
  }
  // 可以基于 $(this).val() 在这里实现实时搜索/过滤
});

事件对象

当事件处理函数执行时，jQuery 会将一个 Event 对象作为第一个参数传递（按照惯例通常命名为 event、e 或 evt）。此对象包含有关事件的重要信息以及控制其行为的方法。

常用属性和方法：

• event.preventDefault(): 阻止浏览器的默认事件行为（例如，阻止链接跳转，阻止表单进行传统提交）。
• event.stopPropagation(): 阻止事件在 DOM 树中向上冒泡到父元素。阻止父元素响应同一事件。
• event.target: 触发事件的特定 DOM 元素（例如，被点击的确切按钮，即使处理函数附加在其父元素上）。
• this: 在处理函数内部，this 通常指向当前附加该处理函数的 DOM 元素。注意：如果使用箭头函数 () => {}，this 的行为将有所不同，不再指向元素。
• event.type: 事件的类型（例如，‘click’，‘mouseover’）。
• event.pageX, event.pageY: 相对于文档左上角的鼠标坐标。
• event.key, event.which: 关于键盘事件中按下的键的信息（event.key 是现代标准）。

$('#myLink').on('click', function(event) {
  event.preventDefault(); // 阻止链接跳转
  console.log('Link click prevented!');
  console.log('事件类型:', event.type); // 输出: 'click'
  console.log('被点击的元素:', event.target); // <a> 元素本身
});

$('#outerDiv').on('click', function(event) {
  console.log('Outer div clicked');
});

$('#innerButton').on('click', function(event) {
  event.stopPropagation(); // 阻止点击事件冒泡到 #outerDiv
  console.log('Inner button clicked, propagation stopped.');
});

事件委托

假设你有一个列表 (<ul>)，其中的列表项 (<li>) 是动态添加的（例如，通过 AJAX）。直接为每个 <li> 附加处理函数意味着每次添加新项时都需要重新附加它们。事件委托有效地解决了这个问题。

使用委托，你将事件处理函数附加到一个静态的 父 元素（一个在页面加载时就存在的元素）上。然后，你将一个选择器作为第二个参数传递给 .on()。只有当事件源自于父元素 内部 匹配该选择器的元素时，处理函数才会运行。

语法：

// 将处理函数附加到父元素 <ul>，但只监听来自其内部的点击事件
// 源自于 <li> 元素。
$('#myList').on('click', 'li', function(event) {
  // 'this' 指的是被点击的那个特定的 <li>，
  // 即使是在这段代码运行之后添加的。
  console.log('Clicked list item:', $(this).text());
  $(this).toggleClass('selected');
});

委托的好处：

• 处理动态元素： 对后来添加的元素自动生效。
• 性能： 只需向父元素附加一个处理函数，而不是潜在地向许多子元素附加处理函数，这可以节省内存和设置时间。

移除事件处理函数：off()

要移除使用 .on() 附加的事件处理函数，请使用 .off() 方法。这对于防止内存泄漏或不必要的行为非常重要，尤其是在单页应用或元素被移除时。

移除特定的处理函数：

// 定义一个命名函数作为处理函数
function myClickHandler() {
  console.log('Button clicked!');
}

// 附加处理函数
$('#myButton').on('click', myClickHandler);

// 稍后，只移除该特定的处理函数
$('#myButton').off('click', myClickHandler);

移除特定事件类型的所有处理函数：

// 移除按钮上的所有 'click' 处理函数
$('#myButton').off('click');

移除元素上的所有事件处理函数：

// 移除按钮上的所有事件处理函数 (click, mouseenter 等)
$('#myButton').off();

移除委托事件处理函数：

// 移除 #myList 内部 li 元素的委托点击处理函数
$('#myList').off('click', 'li');

以编程方式触发事件：trigger()

你可以使用 .trigger() 方法手动触发元素上的事件。这将执行附加到该元素上指定事件类型的所有处理函数。

$('#myButton').on('click', function() {
  console.log('Button was clicked or triggered!');
});

// 以编程方式触发点击事件
$('#myButton').trigger('click'); // 将导致 'Button was clicked or triggered!' 被打印到控制台
对了触发这个事件
$('#myButton').trigger('click'); // Will cause 'Button was clicked or triggered!' to log

这对于测试或集成应用程序的不同部分很有用。

进一步学习

jQuery 的事件系统功能强大。有关方法的完整列表和高级选项（如事件命名空间），请查阅官方 jQuery API 文档：

• jQuery 事件文档

• MDN Web Docs - 事件（用于理解原生的浏览器事件）