Отличия this от event в JavaScript

Ключевое слово this

В JavaScript this всегда относится к «владельцу» выполняемой функции, или, если быть точнее, к объекту, методом которого является функция. Также, в JavaScript мы можем использовать this для указания на определенный объект.

Неаккуратное использование this в JavaScript может стать источником трудно отлавливаемых ошибок.

Что же такое this? Переменная this в функции всегда ссылается на объект, который вызывает эту функцию как метод. Если же функция вызывается просто как функция, а не как метод какого-либо объекта — значение this ссылается на глобальный объект (в строгом режиме в этом случае значением this будет undefined).

Таким образом, переменная this, используемая внутри функции (скажем, функции A), содержит ссылку на объект, который вызывает функцию А. Т.е. переменная this позволяет получить доступ к свойствам и методам объекта, вызывающего функцию A. Это особенно актуально в том случае, если мы не всегда знаем, какой объект вызывает функцию. Таким образом, this — это своего рода ярлык внутри функции, ссылка на вызывающий функцию объект.

На каком бы элементе мы ни поймали событие, всегда можно узнать, где конкретно оно произошло.

Самый глубокий элемент, который вызывает событие, называется «целевым» или «исходным» элементом и доступен как event.target. Возможна и ситуация, когда event.target и this – один и тот же элемент, например если в форме нет других тегов и клик был на самом элементе.

Например, если стоит только один обработчик form.onclick, то он «поймает» все клики внутри формы. Где бы ни был клик внутри – он всплывёт до элемента <form>, на котором сработает обработчик.

Отличия this от event

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

event - это объект события, а event.target - источник события.

this или event.currentTarget - всегда будет объект, к которому привязан обработчик событий, например, даже если кликнули по элементу внутри формы, например по кнопке, то все равно это будет форма, так как обработчик сработал на ней. Внутри обработчика, currentTarget всегда совпадает с переменной this. Однако, этот элемент может не являться источником события, поскольку оно могло быть передано от дочернего элемента, в результате "всплытия" события, вверх по иерархии DOM. Первоначальный источник события содержится в event.target.

event.target – это исходный элемент, на котором произошло событие, в процессе всплытия он неизменен. event.target будет содержать ссылку на конкретный элемент внутри формы, на котором произошёл клик. Это не тот элемент, к которому был привязан обработчик этого события, а именно самый глубокий тег, на который непосредственно был, к примеру, совершен клик.

Если повесить событие не на одиночный элемент типа input, а не на какой-нибудь блок с вложенными элементами, то event.target, мог бы вернуть и вложенный элемент, который являлся источником события.

Пример с this

В данном примере, this это объект user.

var user = {
    name       : 'John',
    lastName   : 'Smith',
    getFullName: function() {
        console.log(this.name + ' ' + this.lastName);
        console.log(user.name + ' ' + user.lastName);
    }
}

Функция getFullName из примера выше дважды выведет один и тот же результат.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *