Подскажите пожалуйста как работает this в контексте данного кода JS

'''
function parallax(event) {
    console.log(this.quertySelectorAll('.layer'));
}
document.addEventListener('mousemove', parallax);
'''

И если я правильно понял второй аргумент функции addEventLisener необходим для передачи событий в качестве аргумента event в функцию parallax


Ответы (2 шт):

Автор решения: Aziz Umarov

В вашем случае это this - document. Второй параметр addEventLisener это метод который будет вызван из контекста document. Но удивительно то что если вызвать paralax из другого контекста то this будет равен ему.

→ Ссылка
Автор решения: Pavel Grishaev

Если функция вызвана не круглыми скобками, а каким-то другим механизмом, то нужно читать документацию этого механизма, чтобы понять, что именно он делает с this.

В вашем случае метод addEventListener объекта document создаёт слушатель события mousemove. И этот слушатель при наступлении события вызывает метод parallax, устанавливая его this равным document.

Слушатель может это сделать так же, как и мы сами можем установить любой this для любой функции в момент её вызова, например методом call:

parallax.call(document.body); // тут у вашей функции this будет равен body

Также этот слушатель, кроме this, передаёт в функцию произошедшее событие как первый аргумент. Если событие называлось mousemove, то при его наступлении в первый аргумент функции передастся событие данного типа (объект типа MouseEvent).

→ Ссылка