I also had this doubt before.

This is basically because an arrow function is different from an ordinary function, and among some of these differences ‘this’ is treated differently in both.

“What About this?
The handling of this is also different in arrow functions compared to regular functions.
In short, with arrow functions there are no binding of this.
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions the this keyword always represents the object that defined the arrow function.”

font: https://www.w3schools.com/js/js_arrow_function.asp

The addEventListener eventTarget expects the second parameter as an eventHandler or a jvasrcipt function (see ref). So if you pass a HTML object as the second parameter, you will get a SyntaxError: “missing formal parameter” and your code will not run (check your browser console).
To answer your other query, this in this case is a HTML p object. You can check yourself:

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

you can’t pass “this” object as a parameter in the anonymous function. When you do it this way, you’re wrong if you think you’re binding. When you type a function using Anonymus, “this” automatically shows the window object, yes.

Note 1: there is no constructor or prototype of Arrow Functions. it is not used with new. The purpose is not to create an object instance.

Note2: as 2 arrow functions do not bind themselves to “this” binding lexical scope context does not bind itself automatically.

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) //
}

So, You cannot rebind “this” in an arrow function. It will always be defined as the context in which it was defined. If you require this to be meaningful you should use a normal function.

I hope it’s a little revealing.

The first and second codes work but the third won’t? I’m trying to understand it, but can’t find anything. If anyone can explain it or reference some doc I appreciate it very much! Thanks!

works fine:

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

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

also works fine:

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

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

won’t work:

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

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

The only difference between the second and third codes is that the second calls “function(event){}” and the third “(this)=>{}” instead. I thought “this” would point to the node, but it seems to point to the mouse event. Am I right?

Why would “this” be a valid argument in “onclick=”myFunc(this)” but not in “addEventListener(‘click’, (this){})”?