在前端开发中，常常需要获取触发某个事件的元素。在 JQuery 中，我们可以使用 event.target 属性来获取触发当前事件的 DOM 元素。但是，在涉及到绑定多个元素的相同事件时，event.target 可能会返回错误的元素。那么，如何正确地获取触发 onclick 事件的元素呢？
使用 event.currentTarget
在 JQuery 中，event.currentTarget 返回当前处理程序正在处理的元素，而不是触发该事件的元素。因此，在一个事件处理程序中使用 event.currentTarget 可以准确地获取目标元素。
考虑下面这个示例：
-- -------------------- ---- ------- ---- ------ -------- --------------------------------- ---------- ------ -------- --------------------------------- ---------- ------ -------- --------------------------------- ---------- ----- -------- -------- ------------------ - --------------------------------- -- -------- - -- - ---------
实现 handleClick 函数，当用户点击列表项中的任何链接时，将输出当前被点击的 <a> 元素。
使用 jQuery 的 this 关键字
在 JQuery 中，this 关键字引用当前元素。因此，我们可以在事件处理程序中使用 $(this) 来获取当前元素。例如：
-- -------------------- ---- ------- ---- ------ -------- -------------------------------- ---------- ------ -------- -------------------------------- ---------- ------ -------- -------------------------------- ---------- ----- -------- -------- -------------------- - ------------------------ -- -------- - -- - ---------
注意，this 关键字只在事件处理程序内部起作用。如果你想在其他地方引用当前元素，可以先将其存储在变量中，如下所示：
-- -------------------- ---- ------- ---- ------ -------- -------------------------------- ---------- ------ -------- -------------------------------- ---------- ------ -------- -------------------------------- ---------- ----- -------- ----------------------- - --- -------------- - -------- ---------------------------- -- -------- - -- --- ---------
总结
在 JQuery 中，获取触发 onclick 事件的元素有多种方法。event.currentTarget 是最准确的方法，但需要将事件传递给处理函数。使用 this 关键字更加简单，但可能会受到作用域的限制。无论使用哪种方法，我们都应该注意保持代码的清晰易懂，并尽可能减少重复代码的使用。
希望本文能对初学者们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26094