Объект Event

При обработке события браузер автоматически передает в функцию обработчика в качестве параметра объект Event, который инкапсулирует всю информацию о событии. И с помощью его свойств мы можем получить эту информацию:

event.bubbles() возвращает true, если событие является восходящим. Например, если событие возникло на вложенном элементе, то оно может быть обработано на родительском элементе.
event.cancelable() возвращает true, если можно отменить стандартную обработку события
event.currentTarget() определяет элемент к которому прикреплен обработчик события
event.defaultPrevented() возвращает true, если был вызван у объекта Event метод preventDefault()
event.eventPhase() определяет стадию обработки события
event.target() указывает на элемент, на котором было вызвано событие
event.timeStamp() хранит время возникновения события
event.type() указывает на имя события

<div id="center">Жми</div>
//получаем элемент
const center = document.querySelector('#center');
//выводим значение event
center.addEventListener('click', function(event) {
console.log(event);
});

<div id="center">Жми</div>
// доступ к элементам для отлавливания кликов
document.querySelector('#center').onclick = function (event) {
// получаем сам элемент на котором был клик через свойства
let target = event.target;
};

Делегирование событий event

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

<table id="center">
<td class="1">1</td>
<td class="2">2</td>
<td class="3">3</td>
</tr>
</table>
//получаем элемент
document.querySelector('#center').onclick = function(event) {
// смотрим где был клик внутри id="center"
console.log(event.target);
};