请教jQuery中事件参数e的作用、e.target含义及与this的区别

嘿，刚接触jQuery/JavaScript的话，这些事件相关的概念确实容易绕，我来给你讲得明明白白的！

一、事件参数e（事件对象）的具体作用 #

这个e是浏览器在触发事件时，自动传递给事件处理函数的事件对象，它就像一个“事件信息包”，装着当前触发事件的所有关键细节：

• 能知道事件类型：比如是click、mouseover还是keydown（通过e.type获取）
• 能获取触发时的鼠标位置：e.clientX/e.clientY表示相对于浏览器窗口的坐标
• 能控制事件行为：比如用e.preventDefault()阻止默认行为（比如阻止链接跳转、表单默认提交），用e.stopPropagation()阻止事件冒泡（避免事件向上传递到父元素）
• 还能拿到触发事件时按下的修饰键：比如e.ctrlKey可以判断用户是否按住了Ctrl键

二、e和this对象的区别 #

这俩完全不是一回事，差别很大：

• this在jQuery的事件处理函数里，指向的是你绑定事件的那个DOM元素。比如你的代码里，$('#testDiv').on('click', ...)，不管你点击的是#testDiv本身还是它的子元素，this始终是#testDiv这个元素。
• 而e是事件对象，它承载的是整个事件的上下文信息，和绑定事件的元素没有直接的“指向”关系，它更关注的是“事件本身发生了什么”。

举个例子：如果#testDiv里面有个<span>测试文本</span>，你点击这个span时，this还是#testDiv，但e里的信息会告诉你“点击的是span这个元素，鼠标在X/Y位置”。

三、e.target对象的作用 #

e.target就是实际触发事件的那个DOM元素——也就是用户真正点击（或触发事件）的那个具体元素，哪怕它是绑定事件元素的子元素。

拿你的代码来说：

$(document).ready(function() { 
  $('#testDiv').on('click', function(e) { 
    var $clicked = $(e.target); 
    $clicked.css('background', 'red'); 
  }); 
});

如果#testDiv里有多个子元素（比如p、span、button），用户点击哪个子元素，e.target就指向哪个元素，然后你把它转成jQuery对象$clicked，就能给这个被点击的元素单独设置红色背景。要是你换成$(this).css('background', 'red')，不管点哪个子元素，整个#testDiv都会变红，这就是e.target的核心用处：精准定位到触发事件的“源头”元素。

内容的提问来源于stack exchange，提问作者Kasador