如何通过事件Listener和'this'获得元素的内部HTML？

Question

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

工作正常：

<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）{}）“中却不是？

Answer 1

您不能将“this”对象作为匿名函数中的参数传递。当你这样做时，如果你认为你有约束力，你就错了。当您使用Anonymus键入函数时，“this”会自动显示窗口对象，是的。注1：没有箭头函数的构造函数或原型。它不与新的一起使用。目的不是创建对象实例。注意2：由于2个箭头函数不会将自己绑定到“this”绑定词法范围上下文不会自动绑定自身。let clicked = () => {&nbsp; console.log(this) // *"this"* will always show the window object because it was written with arrow function.}let clicked = function(){&nbsp; 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>&nbsp; // 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){&nbsp; &nbsp; console.log(el.innerHTML) // outputs "foo"&nbsp; &nbsp; console.log(this) //}因此，您不能在箭头函数中重新绑定“this”。它将始终被定义为定义它的上下文。如果你要求这有意义，你应该使用一个普通的函数。我希望这有点启示。

Answer 2

addEventListener eventTarget 需要第二个参数作为 eventHandler 或 jvasrcipt 函数（参见 ref）。因此，如果您将HTML对象作为第二个参数传递，您将获得一个语法错误：“缺少正式参数”，并且您的代码将不会运行（检查浏览器控制台）。为了回答您的其他查询，在本例中，这是一个 HTML p 对象。您可以检查自己：console.log(this);console.log(typeof this);

Answer 3

我以前也有过这样的疑问。这主要是因为箭头函数与普通函数不同，并且在其中一些差异中，“this”在两者中都受到不同的对待。“那这个呢？与常规函数相比，箭头函数对此的处理也不同。简而言之，使用箭头函数没有绑定。在常规函数中，this 关键字表示调用函数的对象，可以是窗口、文档、按钮或其他任何内容。对于箭头函数，this 关键字始终表示定义箭头函数的对象。字体：&nbsp;https://www.w3schools.com/js/js_arrow_function.asp