Как получить внутренний HTML элемента через eventListener и 'this'?

Question

Первый и второй коды работают, а третий нет? Я пытаюсь понять это, но ничего не могу найти. Если кто-то может объяснить это или сослаться на некоторые, сделайте c Я очень ценю это! Спасибо!

отлично работает:

<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" может быть допустимым аргументом в "onclick =" myFun c (this) ", но не в" addEventListener ('click', (this) {}) "?

Answer 1

addEventListener eventTarget ожидает, что второй параметр будет обработчиком событий или функцией jvasrcipt ( см. Ref ). Поэтому, если вы передадите объект HTML в качестве второго параметра, вы получите SyntaxError: «отсутствует формальный параметр», и ваш код не будет запущен (проверьте консоль браузера). Чтобы ответить на ваш другой запрос, this в данном случае является объектом HTML p. Вы можете проверить сами:

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

Answer 2

вы не можете передать "этот" объект в качестве параметра в анонимной функции. Когда вы делаете это таким образом, вы ошибаетесь, если думаете, что обязываете. Когда вы набираете функцию с помощью Anonymus, "this" автоматически показывает объект окна, да.

Примечание 1: нет конструктора или прототипа стрелочных функций. не используется с новым. Цель не в том, чтобы создать экземпляр объекта.

Примечание 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" в стрелочной функции. Он всегда будет определяться как контекст, в котором он был определен. Если вы хотите, чтобы это было значимым, вы должны использовать обычную функцию.

Надеюсь, это немного показательно.

Answer 3

У меня тоже было это сомнение раньше.

Это в основном потому, что стрелочная функция отличается от обычной функции, и среди некоторых из этих различий 'this' обрабатывается по-разному в обеих.

" Что насчет этого? Обработка this также отличается в стрелочных функциях по сравнению с обычными функциями. Короче говоря, со стрелочными функциями нет привязки this. В обычных функциях ключевое слово this представляет объект, который вызвал функцию, который может быть окном, документом, кнопкой или чем-то еще. В стрелочных функциях ключевое слово this всегда представляет объект, определяющий стрелочную функцию. "

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