Is having multiple onmouseup event handlers valid html?

Question

I'm refatoring some html in a JSP and I've noticed that the code has multiple onmouseup attributes for a button.

Is this valid html, it seems to work, but is it valid?

Answer 1

Yes, you can have multiple event listeners and no, using multiple attributes is incorrect (see my comment).

Answer 2

The validator will tell you if it's valid. I will tell you that it's better to practice behavorial separation.

Answer 3

Here is a good example by digital-ether of how to properly attach multiple handlers that works both in standards-compliant browsers and IE:

/**
* Add events
* @param Object HTML Element
* @param string name of trigger
* @param string name of function to attach
* @param bool capture
*/
addEvent = function(el, evType, fn, useCapture) {
    if (el.addEventListener) {
     el.addEventListener(evType, fn, useCapture);
     return true;
    }
    else if (el.attachEvent) {
     var r = el.attachEvent('on' + evType, fn);
     return r;
    }
    else {
     el['on' + evType] = fn;
    }
}

Answer 4

I think it's a case of invalid markup that happens to work in certain browsers. As such, it should be considered a bit of code in need of refactoring.

As Josh Stodola and David Dorward point out above, an Element can't have multiple instances of the same attribute and the W3C validator will point that out, too.

However, some browsers are quite forgiving and will let things work regardless of validation; others won't, though, and users of those browsers will have a problem. Basically, you're going to find yourself in weird edge cases and unsupported behavior: it's hard to guarantee which browsers it works in (I tried a snippet like yours in Firefox 3 and it failed) as it's against spec; and, since it's against spec, there's no guarantee what order your Events will fire in, so you can't really guarantee the order of your Events firing, if that's important.

Seems like a bit of clean up is in order.