jquery 绑定事件 _this

jQuery 事件绑定中的 _this 使用

在 jQuery 中，_this 通常用于在事件处理函数中保留对当前 DOM 元素的引用，尤其是在嵌套函数或异步回调中需要访问原始上下文时。

常见场景与解决方案

保存当前元素的引用

在事件处理函数内部，this 通常指向触发事件的 DOM 元素。若需要在嵌套函数中访问该元素，可通过 _this 临时保存：

$('.btn').click(function() {
    var _this = this; // 保存当前 DOM 元素
    setTimeout(function() {
        $(_this).css('color', 'red'); // 在回调中使用
    }, 1000);
});

箭头函数替代方案

ES6 的箭头函数自动绑定外层 this，可避免手动保存 _this：

$('.btn').click(function() {
    setTimeout(() => {
        $(this).css('color', 'red'); // 直接使用外层 this
    }, 1000);
});

jQuery 的 event.currentTarget

通过事件对象的 currentTarget 属性也可获取触发事件的元素：

$('.btn').click(function(event) {
    setTimeout(function() {
        $(event.currentTarget).css('color', 'red');
    }, 1000);
});

注意事项

• 使用 _this 时需确保变量名不与作用域内其他变量冲突。
• 在严格模式下，全局作用域的 this 为 undefined，需明确绑定上下文。
• 箭头函数虽简化代码，但会改变 this 的绑定规则，需根据场景选择。

通过以上方法，可以灵活处理 jQuery 事件中的上下文绑定问题。