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 ведет себя по-разному ко всем другим браузерам (см. Why does an onclick property set with setAttribute fail to work in IE? для обсуждения этого вопроса). Просто используйте свойства, где бы вы ни находились, и если есть вероятность, что вам понадобятся несколько обработчиков событий, самым простым вариантом будет использование старых свойств обработчика событий DOM0 и убедитесь, что вы назначили им функцию. В этом случае, используя ваш последний пример:

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