Преимущества addEventListener по сравнению с onclick

В приведенном вами примере разница между использованием onclick и addEventListener заключается в следующем:

Когда вы присваиваете onclick новому значению, как в случае с doThing_1 и doThing_2, второе присваивание (в данном случае doThing_2) перезаписывает первое. Поэтому при клике на элемент с id='a' будет выполняться только doThing_2.

С другой стороны, когда вы используете addEventListener, вы можете добавлять несколько обработчиков для одного и того же события. В вашем примере функции doThing_3 и doThing_4 будут вызываться по клику, так как addEventListener позволяет добавлять обработчики, не удаляя предыдущие.

Еще один важный момент: onclick всегда будет работать во всех современных браузерах, тогда как addEventListener не поддерживается в Internet Explorer версии ниже 9. Для этих версий можно использовать аналогичный метод attachEvent, хотя синтаксис будет немного отличаться.

Таким образом, если вам нужно назначить несколько обработчиков для одного события, рекомендуется использовать addEventListener. Если же вам нужно просто назначить один обработчик, onclick будет более простым вариантом, но старайтесь избегать его, если хотите иметь возможность добавлять несколько обработчиков.

Хотя onclick работает во всех браузерах, addEventListener не поддерживается старыми версиями Internet Explorer, которые используют вместо этого attachEvent.

Недостатком onclick является то, что можно назначить только один обработчик события, тогда как addEventListener и attachEvent позволяют вызывать все зарегистрированные обратные вызовы.

Резюме:

1. addEventListener позволяет добавлять несколько событий, тогда как с помощью onclick это сделать нельзя.
2. onclick можно добавить как атрибут HTML, в то время как addEventListener можно использовать только внутри элементов <script>.
3. addEventListener принимает третий аргумент, который может остановить дальнейшую обработку события.

Оба метода могут использоваться для обработки событий. Однако предпочтительнее использовать addEventListener, так как он обладает всеми возможностями onclick и даже больше. Не стоит использовать встроенный onclick в качестве атрибутов HTML, так как это смешивает JavaScript с HTML, что является плохой практикой и снижает удобство поддержки кода.

На сколько мне известно, событие "load" в DOM работает довольно ограниченно. Это означает, что оно срабатывает только для объекта window, изображений и элементов <script>, например. То же самое относится и к прямому присваиванию onload. Технически между ними нет различий; возможно, выделение .onload = имеет лучшую кроссбраузерную совместимость.

Однако вы не можете назначить событие load для элементов <div>, <span> или подобных.

Одной детали ещё не было отмечено: современные настольные браузеры рассматривают различные нажатия кнопок как "клики" для AddEventListener('click') и onclick по умолчанию.

• В Chrome 42 и IE11 оба метода — onclick и AddEventListener — срабатывают как на левый, так и на средний клик.
• В Firefox 38 onclick срабатывает только на левом клике, тогда как AddEventListener срабатывает на левом, среднем и правом клике.

Кроме того, поведение среднего клика очень непоследовательно среди браузеров, когда речь идёт о курсорах прокрутки:

• В Firefox события среднего клика всегда срабатывают.
• В Chrome они не срабатывают, если средний клик открывает или закрывает курсор прокрутки.
• В IE события срабатывают, когда курсор прокрутки закрывается, но не когда открывается.

Также стоит отметить, что события "клик" для любого элемента HTML, доступного для выбора с клавиатуры, такого как input, также срабатывают при нажатии пробела или Enter, когда элемент выделен.