Onclick vs addEventListener

Возможный дубликат:
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);

Чем больше "правильного" более поддерживаемого способа сделать это?

Ответ 1

если вы уже знаете, что функция и элемент являются частью 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

Более подробно вы можете прочитать следующее: Добавление обработчика событий

Ответ 2

Последний (addEventListener()) - лучший способ, так как вы можете присоединить несколько событий одного типа к одному и тому же элементу.

Назначая onclick и т.д., вы перезаписываете существующие обработчики.