jQuery 是一种流行的 JavaScript 库，它极大地简化了 HTML 文档的遍历、事件处理和动画等操作。在 jQuery 中，事件处理是一个重要的组成部分，而事件目标（event target）是理解事件处理的基础。本文将深入探讨 jQuery 事件目标的概念，并提供一些核心技巧，帮助您轻松实现页面交互新高度。
事件目标的概念
在浏览器中，当用户与网页进行交互时，会触发各种事件，如点击、鼠标悬停、键盘输入等。每个事件都有一个与之关联的目标，通常是一个 DOM 元素。事件目标可以是任何可以接收事件的元素，例如 HTML 元素、文本节点、注释等。
在 jQuery 中，事件目标可以通过选择器来指定。选择器可以是简单的元素标签名，也可以是复杂的 CSS 选择器。
选择事件目标
以下是一些常用的方法来选择事件目标：
1. 使用元素标签名
$(document).on('click', 'button', function() {
alert('按钮被点击！');
});
在上面的代码中，我们监听文档中所有 button 元素的点击事件。
2. 使用 CSS 选择器
$(document).on('mouseover', '.my-class', function() {
$(this).css('background-color', 'red');
});
在上面的代码中，我们监听所有具有 my-class 类的元素的鼠标悬停事件。
3. 使用更复杂的选择器
$(document).on('focus', 'input[type="text"]', function() {
$(this).css('border', '2px solid blue');
});
在上面的代码中，我们监听所有类型为文本的 input 元素的聚焦事件。
事件目标的 this 关键字
在 jQuery 的事件处理函数中，this 关键字指向触发事件的元素。这意味着你可以直接在事件处理函数中使用 this 来引用事件目标。
$(document).on('click', 'a', function() {
alert('链接的文本是：' + $(this).text());
});
在上面的代码中，当用户点击链接时，会弹出一个包含链接文本的警告框。
阻止事件冒泡和默认行为
在某些情况下，你可能需要阻止事件冒泡到父元素或者阻止默认事件行为（如链接的跳转）。以下是如何实现这两个功能：
阻止事件冒泡
$(document).on('click', 'div', function(event) {
event.stopPropagation();
});
在上面的代码中，当用户点击 div 元素时，会阻止事件冒泡到其父元素。
阻止默认行为
$(document).on('click', 'a', function(event) {
event.preventDefault();
});
在上面的代码中，当用户点击链接时，会阻止链接的默认跳转行为。
总结
理解 jQuery 事件目标和掌握相关技巧对于实现高效的页面交互至关重要。通过使用选择器来指定事件目标，你可以轻松地监听各种事件，并在事件处理函数中访问事件目标。此外，通过阻止事件冒泡和默认行为，你可以进一步控制事件流，实现更复杂和交互性更强的页面效果。