Чем отличается addEventListener('click', handler) от element.onclick = handler?

Question

[AlphaDMQ]

В первом случае функция - callback, которая вызывается после того, как событие 'click' наступило. И мне кажется, что это более правильный вариант записи, чем присвоение событию функции. Хотя это лишь то, как выглядит процесс внешне, реализуется они одинаково. Но в чем разница этих двух способов? Какой правильнее? Какой используете вы в своих скриптах?

Answer 1

[Антон]

1) можно навесить сколько угодно обработчиков на одно событие
2) можно передать 3 аргументом дополнительные опции https://developer.mozilla.org/en-US/docs/Web/API/E...

Comments

[Dima Polos]

Третий флаг это Вы про всплытие событий имеете ввиду "неблокирование"?

[Антон]

Dima Polos, извиняюсь, перепутал с 3 аргументом { passive: true }.

Answer 2

[grom111]

Тык

Comments

[AlphaDMQ]

Спасибо. Хотя я имел в виду кое-что другое. Как событию может быть присвоена функция (element.onclick = handler), когда событие не есть сама функция, а оно лишь вызывает callback, сопоставимый с данным событием?

[Dima Polos]

AlphaDMQ, дело в том, что браузер каждый элемент на странице представляет в виде объекта, в этом объекте по ключам лежат свойства и методы этого объекта, вот у любого дива есть свойство onclick, onmouseenter, onscroll и так далее, и когда пишете div.onclick, вы обращаетесь к объекту, к его полю и в него присваиваете функцию, которая присвоится туда как ссылка, и при наступлении события браузер посмотрит, что в данном объекте в соответствующем поле и вызовет эту функцию.
Можете через querySelector найти элемент и вывести его в консоль, все там наглядно поймете, я думаю:)

[AlphaDMQ]

Dima Polos, спасибо, в принципе это то, что я хотел услышать. Ссылка на функцию.