HTML изменяется с помощью element.setAttribute ("onclick", "alert ('Test');") и element.onclick = "alert ('Test');";

Question

Я удивился, сравнив следующие случаи:

button = document.getElementById("addSugerenciaButton");

if (button != null) {
   button.onclick = "post_to_url('" + addSugerenciaURL + "', idBuzon', '" + id + "');";
}

button = document.getElementById("removeBuzonButton");

if (button != null) {
    button.onclick = function() {
        if (!confirm(removeSugerenciaMessage)) {
            return false; 
        };
        post_to_url(removeBuzonURL, 'idBuzon', id);
    };
}

button = document.getElementById("editBuzonButton");

if (button != null) {
    button.setAttribute("onclick","post_to_url('" + editBuzonURL + "', 'idBuzon', '" + id + "');");
}

Только последний, по-видимому, изменил HTML (по крайней мере, с помощью Firebug), тогда как остальные, хотя и работали должным образом, не показывали никакого события onclick в элементе editBuzonButton.

Есть идеи, почему это происходит?

Answer 1

Да. setAttribute добавляет атрибут к элементному DOM-узлу. Для атрибута onclick под прикрытием также имеется побочный эффект добавления обработчика события onclick, который создается путем «компиляции» значения атрибута в функцию javascript.

Назначение функции свойству onclick элемента напрямую присоединяет обработчик, но не добавляет атрибут автоматически в узел DOM.

Теперь возможно, что есть браузеры, которые не делают различий между добавлением атрибута и непосредственным подключением обработчика. Но имейте в виду, что, хотя изменение документа может создать объекты сценариев в качестве побочного эффекта, обратное не должно иметь место: программное создание структур DOM может изменить или не изменить HTML, лежащий в основе документа, в зависимости от браузера, который вы используете .

Answer 2

Хотя все мы знаем, что самый стандартный способ установки события onclick внутри элемента HTML - это element.onclick = "alert('Example');";,

Неправильно.

Вы должны использовать addEventListener / attachEvent.

Например:

if (element.addEventListener) {
    element.addEventListener('click', handler, false); 
} else if (el.attachEvent) {
    element.attachEvent('onclick', handler);
}

Answer 3

В JavaScript в браузерах вам гораздо лучше не иметь ничего общего с атрибутами, если вы можете избежать этого, чего вы почти всегда можете. В случае атрибутов обработчика событий IE ведет себя по-разному для всех остальных браузеров (см. Почему свойство onclick, установленное с setAttribute, не работает в IE? для обсуждения этого). Просто используйте свойства везде, где можете, и, если нет возможности, вам понадобятся несколько обработчиков событий, самый простой вариант - использовать старые свойства обработчика событий DOM0 и убедиться, что вы назначаете им функцию. В этом случае, используя ваш последний пример:

button.onclick = function() {
    post_to_url(editBuzonURL, 'idBuzon', id);
};