Объект события - "e", "e.target" - HTMLElement, на котором произошло событие "e.type".
В этой строке проверяется является ли элемент, на котором произошло событие дочерним по отношению к элементу main или элемент "main" и есть тот элемент, на котором это событие произошло.

Nexus,
огромное спасибо, что разъяснили столь подробно.

Скажите метод matches подходит для проверки класса по которому было произведено событие?

window.onclick = function(event) {
  if (event.target.matches('.dropbtn')) {}

а самому проверить? да, но возможно лучше будет closest

рони,
Спасибо за ответы, я знал что пример рабочий, просто хотел уточнить возможные нюансы. Как к примеру вы упомянули про closest, я в первые про него слышу. В остальном постараюсь понапрасну не писать.

Скажите пожалуйста, у меня такой вопрос.
Есть модальное окно, при его всплытии работает скролл сайта.
Могу ли я от него избавиться, таким путем задав body class или id, и впоследствии в момент всплытия popup-окна добавить ему данный класс. К примеру:

.popup-active. classBody {
     overwlov:hidden;
}

Или это может вообще считается не очень хорошей практикой body задавать класс?

Nlk, нормальная практика.
У вас css малость кривоват.

body.popup-active{overflow:hidden;}

Nexus,
в данном случае если я не ошибаюсь overflow:hidden мы задаём классу .popup-active, а мне нужно overflow:hidden задать body чтобы при всплытии моего popup-окна прокрутка сайта исчезла. Или я чего -то не понимаю..

Nlk, нельзя добавить класс дочернему элементу, а свойство объявить его родителю, поэтому когда popup показывается тэгу body добавляете класс "popup-active".
У body с классом "popup-active" скроллбары отключаем (код я привел выше).

Тут вроде бы адекватное описание селекторов:
https://misha.blog/css/selektoryi.html