为何在jQuery hover事件监听器中bind(this)无法正确绑定this值？

核心矛盾 #

你困惑的是：不管用jQuery还是原生JS，给事件处理函数加了bind(this)后，本该指向触发元素的this就失效了，没法正确获取元素ID。

问题根源 #

1. bind()的本质 #

bind()的作用是强制锁定函数的this指向，一旦调用bind()指定了某个对象，后续不管这个函数以什么方式被调用，它的this都不会再改变。

你代码里的bind(this)，这里的this是当前代码所在的上下文（比如全局环境下就是window，如果在某个函数里就是该函数的this），完全不是你期望的<a>元素。

2. 框架/原生的默认this规则 #

• jQuery：它的事件绑定方法（如hover）会自动把事件处理函数的this指向触发事件的DOM元素，但你用bind()强制改写了this，直接覆盖了jQuery的默认行为。
• 原生JS：addEventListener同样会默认让事件处理函数的this指向触发元素，bind()的强制绑定直接破坏了这个规则。

正确写法 #

jQuery 版本 #

直接去掉bind(this)，让jQuery自动处理this指向：

function toggleDropdown() {  
  console.log(this.id); // 此处this就是<a>元素，无需转$(this)[0]
}
$("a").hover(toggleDropdown);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test" href="#">TEST LINK</a>

原生JS 版本 #

同样去掉bind(this)，依赖addEventListener的默认this指向：

function toggleDropdown() {  
  console.log(this.id);
}
document.getElementsByTagName("a")[0].addEventListener("mouseenter", toggleDropdown);

<a href="#!" id="myID">TEST LINK</a>

特殊场景：需同时访问外部上下文和元素 #

如果既要拿到触发事件的元素，又要用到外部上下文的this，可以用箭头函数或闭包：

// 示例：假设外部存在需要访问的上下文
const outerContext = { info: "外部数据" };

// 闭包方式
function toggleDropdown() {  
  console.log("元素ID：", this.id);
  console.log("外部上下文：", outerContext.info);
}
document.querySelector("a").addEventListener("mouseenter", toggleDropdown);

// 箭头函数方式（箭头函数的this继承自外部作用域）
document.querySelector("a").addEventListener("mouseenter", (e) => {
  console.log("元素ID：", e.target.id);
  console.log("外部上下文：", outerContext.info);
});

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