HTML changes with element.setAttribute("onclick","alert('Test');") and element.onclick = "alert('Test');";

Question

I got surprised when comparing the following cases:

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 + "');");
}

Just the latter appeared to change the HTML (at least inspecting with Firebug) whilst the rest, although working properly too, they didn't show any onclick event in the editBuzonButton element.

Any ideas why this is happening?

Answer 1

Yes. setAttribute adds an attribute to an Element DOM node. For the onclick attribute, there is a side effect under the covers of also adding an onclick event handler, which is made by 'compiling' the attribute value into a javascript function.

Assigning a function to the onclick property of the element directly does attach the handler, but does not automatically add an attribute to the DOM node.

Now it is possible that there are browsers that do not make the distinction between adding the attribute and attaching the handler directy. But keep in mind that although modifying the document may create scriptable objects as side effect, the reverse does not have to be the case: programmatically creating DOM structures may or may not change the HTML underlying the document according to the browser you happen to be using.

Answer 2

Although we all know that the most standard way to set the onclick event within an HTML element is through element.onclick = "alert('Example');";,

Wrong.

You should use addEventListener / attachEvent.

For example:

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

Answer 3

In JavaScript in browsers, you're much better off not having anything to do with attributes if you can possibly avoid it, which you almost always can. In the case of event handler attributes, IE behaves differently to all other browsers (see http://stackoverflow.com/questions/95731/why-does-an-onclick-property-set-with-setattribute-fail-to-work-in-ie for a discussion on this). Just use properties wherever you can, and unless there's a possibility you will need multiple event handlers, the easiest option is to use the old DOM0 event handler properties and make sure you assign them a function. In this case, using your last example:

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