从 jQuery 到原生 JavaScript 的语法。功能不一样[重复]答案

【问题标题】：Syntax from jQuery to vanilla JavaScript. Function does not work the same [duplicate]从 jQuery 到原生 JavaScript 的语法。功能不一样[重复]
【发布时间】：2020-05-04 11:35:28
【问题描述】：

我在 jQuery 中有以下代码：

$("#input").change(function(){
    var input = this;
    console.log(input);
});

当输入发生变化时，该元素在控制台中显示为 html。我试图把它改成这样的纯 JavaScript：

var img = document.getElementById('input');
img.addEventListener( 'change' , () => {
    var input = this;
    console.log(input);
});

这里控制台中的输出是整个 html 文档，而不仅仅是输入元素。有人可以向我解释为什么会这样吗？

谢谢！

【问题讨论】：

旁注；不需要input。您已经有了要使用的 img 变量。

标签： javascript jquery html

【解决方案1】：

来自docs

箭头函数没有自己的this。 this 的值使用封闭词法范围；箭头功能遵循正常变量查找规则。所以在搜索this 时，这不是在当前范围内，箭头函数最终会找到this 从它的封闭范围。

所以，在这种情况下你需要做的一切：

var img = document.getElementById('input');
img.addEventListener( 'change' , function () {
    var input = this;
    console.log(input);
});

【讨论】：

好的！谢谢！我完全忘记了这一点，并将我的代码更改为在函数中添加一个事件参数并将 event.target 存储在我的输入变量中，我发现它返回了目标输入。感谢您为我解决问题！
另外，您可以保留箭头函数并从传递给处理函数的参数中访问引发事件的元素。

【解决方案2】：

发生这种情况是因为箭头函数不会创建新范围。将第二个示例中的箭头函数更改为

img.addEventListener('change', function () {
    var input = this;
    console.log(input);
});

它会像你的第一个例子一样工作。

另请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

【讨论】：