Выбор ответа Middle this, call, apply, bind обновлено
this в обработчике при делегировании
Вопрос
Пользователь кликнул по <li> внутри <ul id="list">. Чему равен this в обработчике?
document.getElementById('list').addEventListener('click', function (event) {
console.log(this);
});
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Элементу <ul, на котором висит обработчик. Для обычной функции-обработчика браузер вызывает её с this, равным event.currentTarget, то есть элементу, на котором зарегистрирован слушатель.
Варианты ответа
- Элементу
<li>, по которому кликнули - Элементу
<ul>, на котором висит обработчикправильный ответ window, как при любом вызове функцииundefined, потому что обработчик вызывается без объекта
Разбор
Для обычной функции-обработчика браузер вызывает её с this, равным event.currentTarget, то есть элементу, на котором зарегистрирован слушатель. Это <ul>. Элемент, по которому кликнули, лежит в event.target: это <li>. window или undefined были бы, если бы браузер вызывал обработчик как обычную функцию, но он передаёт this явно. Будь обработчик стрелкой, this был бы внешним.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.