如何通过eventListener和'this'获取元素的innerHTML？答案

【问题标题】：How to get innerHTML of element through an eventListener and 'this'?如何通过eventListener和'this'获取元素的innerHTML？
【发布时间】：2020-05-26 10:33:40
【问题描述】：

第一个和第二个代码有效，但第三个无效？我试图理解它，但找不到任何东西。如果有人可以解释它或参考一些文档，我非常感谢！谢谢！

工作正常：

<p id="p" onclick="myFunc(this)">foo</p>

<script>    
function myFunc(el){
    console.log(el.innerHTML) // outputs "foo"
}
</script>

也可以正常工作：

<p id="p">foo</p>

<script>    
document.querySelector('#p').addEventListener('click', function (event) {
    console.log(this.innerHTML);
});
</script>

不会工作：

<p id="p">foo</p>

<script>    
document.querySelector('#p').addEventListener('click', (this) => {
    console.log(this.innerHTML);
});
</script>

第二个和第三个代码的唯一区别是第二个调用“function(event){}”，第三个调用“(this)=>{}”。我以为“this”会指向节点，但它似乎指向鼠标事件。我说的对吗？

为什么 "this" 在 "onclick="myFunc(this)" 中是有效参数，但在 "addEventListener('click', (this){})" 中却不是？

【问题讨论】：

第三个“this”是p元素

标签： javascript this addeventlistener innerhtml

【解决方案1】：

我之前也有这个疑问。

这基本上是因为箭头函数与普通函数不同，其中一些差异中的“this”在两者中的处理方式不同。

"这个怎么样？ 与常规函数相比，箭头函数的处理也不同。简而言之，箭头函数没有 this 的绑定。在常规函数中，this 关键字表示调用函数的对象，可以是窗口、文档、按钮或其他任何东西。对于箭头函数，this 关键字始终表示定义箭头函数的对象。”

字体：https://www.w3schools.com/js/js_arrow_function.asp

【讨论】：

【解决方案2】：

addEventListener eventTarget 需要第二个参数作为 eventHandler 或 jvasrcipt 函数 (see ref)。因此，如果您将 HTML 对象作为第二个参数传递，您将收到 SyntaxError: "missing form parameter" 并且您的代码将无法运行（检查您的浏览器控制台）。为了回答您的其他查询，在这种情况下，this 是一个 HTML p 对象。你可以自己检查一下：

console.log(this);
console.log(typeof this);

【讨论】：

【解决方案3】：

您不能将 "this" 对象作为参数传递给匿名函数。当你这样做时，如果你认为你有约束力，那你就错了。当您使用 Anonymus 键入函数时，"this" 会自动显示窗口对象，是的。

注意 1：箭头函数没有构造函数或原型。它不与 new 一起使用。目的不是创建对象实例。

注意 2：因为 2 个箭头函数不会将自己绑定到 "this" 绑定词法范围上下文不会自动绑定自己。

let clicked = () => {
  console.log(this) // *"this"* will always show the window object because it was written with arrow function.
}

let clicked = function(){
  console.log(this) // *"this"* will show the" p " element. Because bind inte.
}

document.querySelector("#p").addEventListener("click", clicked)
document.querySelector("#p").addEventListener("click", clicked.bind(this)) // If you do bind this way and call the clicked function, which is defined as the arrow function, *"this"* window will show the object.


<p id="p" onclick="myFunc(this)">foo</p>  // The reason this works is because it shows the element when you say *"this"*. but the function is in scope if you look at the console.log(this) output, it will show the window object.

function myFunc(el){
    console.log(el.innerHTML) // outputs "foo"
    console.log(this) //
}

因此，您不能在箭头函数中重新绑定 "this"。它将始终被定义为定义它的上下文。如果您要求它有意义，您应该使用普通函数。

我希望它有点暴露。

【讨论】：