在开发前端应用程序时，经常需要处理用户与页面元素之间的交互。这就需要获取触发事件的发送者对象，以便在代码中进行操作。
在 jQuery 中，可以使用 event.target 或 this 来获取发送者对象。但是，这两种方法有不同的用途和限制，需要根据实际情况进行选择。
使用 event.target
event.target 表示引起事件的 DOM 元素，在事件处理函数中，它指向当前触发事件的元素。例如：
$('button').on('click', function(event) {
console.log(event.target); // 输出点击的按钮元素
});使用 event.target 可以方便地获取发送者对象，但是需要注意以下几点：
- 如果事件绑定在父元素上，而子元素被点击，则
event.target指向子元素； - 如果事件绑定在文档对象上，而点击空白处，则
event.target指向文档对象； - 如果事件绑定在 window 对象上，而窗口被缩放或滚动，则
event.target指向 window 对象。
因此，在使用 event.target 时，需要考虑事件绑定的位置和可能发生的变化。
使用 this
this 表示当前执行事件处理函数的元素，在事件处理函数中，它指向绑定事件的元素。例如：
$('button').on('click', function() {
console.log(this); // 输出点击的按钮元素
});使用 this 可以直接获取绑定事件的元素，而不需要考虑事件绑定的位置和可能发生的变化。但是，需要注意以下几点：
- 如果在事件处理函数中使用了箭头函数，则
this指向父级作用域； - 如果在事件处理函数中调用了其他函数，则
this的值可能发生改变。
因此，在使用 this 时，需要考虑函数的上下文和可能发生的变化。
示例代码
下面是一个使用 event.target 和 this 的示例代码：
-- -------------------- ---- ------- ------- -------------- ----------- ---- ------------------- -------- --------------------- --------------- - -------------------------- -- --------- ------------------ -- --------- ---------------------- ------- ---------- --- -------- -------------------- - ---------------------------- - ---------
在这个示例中，当按钮被点击时，会输出点击的按钮元素，并调用 showMessage 函数显示消息。showMessage 函数中的 this 指向按钮元素，因为它是在按钮的事件处理函数中调用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30015