I'm little confusing by using "onclick" "onmousedown" as a property of HTML elements.
Такие как:
<button onclick="my_JS_function()"></button>
or
<div onmousedown="my_another_JS_funciton"></div>
Но некоторые люди говорят, что единственный "правильный" способ добавления "слушателей" - это
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
Каков более «правильный» более поддерживаемый способ сделать это?
если вы уже знаете, что функция и элемент являются частью html, т.е. не добавляются динамически, чем хорошо, что вы добавляете встроенную функцию, а не используете дополнительный вызов метода, например "addEventListener"
Еще одно замечание
В то время как onclick работает во всех браузерах, addEventListener не работает в более старых версиях Internet Explorer, где вместо этого используется attachEvent.
OnClick — это свойство DOM Level 0. AddEventListener является частью определения DOM Level 2. Прочтите об этом: http://www.w3.org/TR/DOM-Level-2-Events/events.html
встроенные обработчики событий, добавленные как атрибуты тега HTML, например:
<a href="gothere.htm" onlick="alert('Bye!')">Click me!</a>
Приведенные выше методы просты, но имеют определенные недостатки: они позволяют вам иметь только один обработчик событий для каждого элемента. Кроме того, со встроенными обработчиками событий вы очень плохо отделяете код JavaScript от разметки HTML.
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
Преимущество этого: вы можете добавить несколько обработчиков событий. также отдельный код html и javascript
Подробнее см. здесь: Добавление обработчика событий
Последний (addEventListener()) — лучший способ, так как вы можете прикрепить несколько событий одного типа к одному и тому же элементу.
Назначая onclick и т. д., вы перезаписываете существующие обработчики.
