Возможный дубликат:
addeventhandler vs onclick
Я немного запутался, используя "onclick" "onmousedown" как свойство элементов HTML.
Например:
<button onclick="my_JS_function()"></button>
или
<div onmousedown="my_another_JS_funciton"></div>
Но некоторые люди говорят, что только "правильный" способ добавления "слушателей" -
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
Чем больше "правильного" более поддерживаемого способа сделать это?
если вы уже знаете, что функция и элемент являются частью html i.e, не получают динамическое добавление, чем это хорошо, что вы добавляете функцию inline, а не используете дополнительный вызов метода, например, 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>
Вышеупомянутые методы просты, но имеют определенные недостатки: они позволяют иметь только один обработчик событий для каждого элемента. Кроме того, с обработчиками событий inline вы получаете очень плохое разделение кода JavaScript от разметки HTML.
document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);
Предотвращение этого: вы можете добавить несколько обработчиков событий. также separte html и код javascript
Более подробно вы можете прочитать следующее: Добавление обработчика событий
Последний (addEventListener()) - лучший способ, так как вы можете присоединить несколько событий одного типа к одному и тому же элементу.
Назначая onclick и т.д., вы перезаписываете существующие обработчики.