异常教程

jQuery event.target 属性（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

事件处理的基础认知

在 Web 开发中，事件处理是构建交互体验的核心技术之一。无论是点击按钮、表单提交，还是页面滚动，所有用户操作都会触发特定的事件。jQuery 作为简化 DOM 操作的工具库，提供了强大的事件处理能力，而 event.target 属性正是其中不可或缺的关键特性。

对于编程初学者而言，理解事件触发的层级关系至关重要。想象一个包含多个嵌套元素的页面：当用户点击某个按钮时，该事件不仅会作用于按钮本身，还可能传递给其父元素或子元素。这种层级传递机制被称为事件冒泡。而 event.target 属性的作用，就是精准定位到事件最初触发的具体目标元素。

event.target 的核心作用与使用场景

定义与基本用法

event.target 是 jQuery 事件对象中的一个属性，用于返回事件最初触发的 DOM 元素。它的值始终指向事件的实际来源，即使该元素位于事件监听的元素层级之下。

例如，当开发者为一个父级容器绑定点击事件时，用户实际点击的是该容器内的某个子元素（如按钮或文本），此时 event.target 将直接指向子元素，而非父容器。

代码示例 1：基础用法

$("#parent-container").on("click", function(event) {  
    // 获取事件源元素  
    const targetElement = event.target;  
    console.log("用户点击了:", targetElement);  
});

与 this 的对比

在事件处理函数中，this 和 event.target 是两个常被混淆的概念：

  • this 指向事件监听绑定的元素（即触发事件的事件委托目标）；
  • event.target 指向实际触发事件的元素（即用户操作的具体目标）。

比喻说明：
可以将 this 想象为“事件的主人”，而 event.target 是“事件的发起者”。例如，当主人（this）的庭院里发生盗窃，实际闯入者（event.target）可能只是一个小偷，而庭院本身并未直接被破坏。

代码示例 2：对比 this 和 event.target

<div id="container">  
    <button>点击我</button>  
</div>  

<script>  
$("#container").click(function(event) {  
    console.log("this 指向:", this.id);          // 输出 "container"  
    console.log("event.target 指向:", event.target.nodeName); // 输出 "BUTTON"  
});  
</script>

event.target 与事件冒泡的关系

事件冒泡机制

当用户在页面上触发某个事件（如点击）时，事件会按照以下顺序传递：

  1. 事件捕获阶段：事件从最外层的 document 开始向目标元素传递；
  2. 目标阶段：事件到达最初触发的元素（即 event.target）；
  3. 事件冒泡阶段：事件从目标元素向上传递至父级元素，直到 document 层级。

比喻说明：
事件冒泡如同向池塘中投掷石子，水波会从中心（event.target）向外扩散，影响到周围的涟漪（父级元素）。

event.target 在事件冒泡中的作用

由于事件冒泡的存在，同一事件可能被多个元素监听。此时 event.target 的值始终保持不变，始终指向事件最初的触发点。

代码示例 3：事件冒泡与 event.target

<div id="grandparent">  
    <div id="parent">  
        <div id="child">点击我</div>  
    </div>  
</div>  

<script>  
$("#grandparent").click(function(event) {  
    console.log("祖父元素监听到:", event.target.id); // 输出 "child"  
});  

$("#parent").click(function(event) {  
    console.log("父元素监听到:", event.target.id);  // 输出 "child"  
});  
</script>

event.target 的实际应用案例

案例 1：动态区分子元素的操作

假设有一个包含多个子元素的列表，开发者需要根据用户点击的具体子元素执行不同操作。此时 event.target 可以精准定位到被点击的元素。

代码示例 4：列表元素操作

<ul id="menu">  
    <li>选项1</li>  
    <li>选项2</li>  
    <li>选项3</li>  
</ul>  

<script>  
$("#menu").on("click", "li", function(event) {  
    const clickedItem = event.target;  
    console.log("被点击的选项内容:", $(clickedItem).text());  
});  
</script>

案例 2：解决事件委托中的歧义

在事件委托模式中，父元素监听子元素的事件。此时 event.target 可以帮助开发者避免因 this 指向父元素而产生的逻辑错误。

代码示例 5：事件委托与 event.target

<div id="panel">  
    <button class="action">操作1</button>  
    <button class="action">操作2</button>  
</div>  

<script>  
$("#panel").on("click", ".action", function(event) {  
    const targetClass = $(event.target).attr("class");  
    if (targetClass === "action") {  
        console.log("执行通用操作");  
    } else {  
        console.log("子元素触发了其他类");  
    }  
});  
</script>

event.target 的高级用法与注意事项

与 event.currentTarget 的区别

event.currentTarget 是 jQuery 事件对象的另一个属性，其值始终指向当前处理事件的元素（即绑定事件监听的元素）。对比 event.target 的话：

  • event.target：事件最初触发的元素（可能在子元素层级）；
  • event.currentTarget：当前正在处理事件的元素（即事件监听绑定的目标）。

表格对比
| 属性名 | 值的指向 | 典型用途 |
|----------------------|-----------------------------------|-----------------------------------|
| event.target | 事件最初触发的元素 | 精准定位用户操作的具体目标 |
| event.currentTarget| 当前处理事件的元素 | 验证事件监听绑定的元素是否有效 |

注意事项

  1. 文本节点的特殊性：
    如果用户点击的是元素内的文本（而非元素本身），event.target 可能指向文本节点。此时需通过 closest() 或 parent() 方法向上查找最近的元素节点。

    代码示例 6：文本节点处理

    if (event.target.nodeType === 3) { // 3 表示文本节点  
    const closestElement = $(event.target).parent();  
    console.log("实际元素:", closestElement);  
}

  2. 跨浏览器兼容性：
    在旧版浏览器中，event 对象的获取方式可能不同。使用 jQuery 可以自动处理兼容性问题，无需手动绑定 window.event。

常见问题与解决方案

问题 1：如何确保 event.target 总是返回元素节点？

解决方案：
通过判断节点类型或使用 jQuery 方法向上查找：

const targetElement = $(event.target).closest("*"); // 获取最近的元素节点

问题 2：在事件委托中，如何避免 event.target 的误导？

解决方案：
结合 closest() 方法限定操作范围，例如：

$("#parent").on("click", function(event) {  
    const validTarget = $(event.target).closest(".target-class");  
    if (validTarget.length) {  
        // 执行操作  
    }  
});

问题 3：event.target 在自定义事件中的表现如何？

解决方案：
当使用 trigger() 或 dispatchEvent() 手动触发事件时，可以通过设置 target 属性控制 event.target 的值：

// 手动设置 event.target  
const customEvent = new Event("custom", {  
    bubbles: true,  
    cancelable: true,  
    target: document.getElementById("myElement") // 显式指定目标  
});

结论

jQuery event.target 属性 是开发者精准控制事件逻辑的核心工具。通过理解其与 this、event.currentTarget 的区别，以及在事件冒泡中的行为，开发者可以编写出更健壮、灵活的交互代码。无论是处理嵌套元素的点击事件，还是实现复杂的事件委托模式，event.target 都能帮助开发者避免歧义，提升代码的可维护性。

掌握这一属性不仅是技术能力的提升，更是对 Web 事件机制本质的深刻理解。在后续的开发中，建议通过实际项目不断练习，逐步内化这一知识点的应用场景。

最新发布

查看更多文章