Add mouseover to all buttons on a page

Is there a way to add a mouseover/mouseout css class change to ALL butt开发者_StackOverflow中文版ons on a page through, for example, some JavaScript in the page header, without having to give each individual button its own onmouseover and onmouseout events? It seems very inefficient that I would have to add this to every single button on all of my pages:

onmouseover="javascript:this.className='ui-state-hover';" onmouseout="javascript:this.className='ui-state-default';"

There must be an easier way to do this!

Give your elements a class and then you go about something like this:

window.onload = function(){
    var elms = document.getElementsByTagName('input');

    // search for element with class myclass
    for (var i = 0; i < elms.length; i++){
      if (elms[i].getAttribute('class') === 'myclass'){

        elms[i].onmouseover = function(){
          this.className='ui-state-hover'
        }

        elms[i].onmouseout = function(){
          this.className='ui-state-default'
        }

      }
    }
}

Just apply the class myclass to your input boxes.

With jQuery:

$(function(){
  $('.myclass').hover(function(){
    $(this).removeClass().addClass('ui-state-hover');
  }, function(){
    $(this).removeClass().addClass('ui-state-default');
  });
});

If you don't need to support IE6, make use of CSS :hover:

button, 
input[type=button], 
input[type=reset], 
input[type=submit] {
    // all properties of `ui-state-default` here
}

button:hover,
input[type=button]:hover, 
input[type=reset]:hover, 
input[type=submit]:hover {
    // all properties of `ui-state-hover` here
}

Otherwise, you can use event delegation through event bubbling:

(for W3C compatible browser)

function getHandler(cls) {
    var types = {'submit': true, 'reset': true, 'button': true};
    return function(event) {
        event = event || window.event;
        target = event.target || event.srcElement;
        if(target.nodeName === "BUTTON"
           || (target.nodeName === "INPUT" && target.type in types)) {
            event.target.className = cls;
        }
    }
}

if(window.attachEvent) {
    window.attachEvent('onmouseover', getHandler('ui-state-hover'));
    window.attachEvent('onmouseout', getHandler('ui-state-default'));
}
else {
    window.addEventListener('mouseover', getHandler('ui-state-hover'), false);
    window.addEventListener('mouseout', getHandler('ui-state-default'), false);
}

Edit: Cross-browser compatible and more sophisticated

For more information, have a look at Advanced event registration models - qurirksmode.org and Event properties - quirksmode.org

You can use jQuery to make it work something like

$(document).ready(function() {
    $("input:button").mouseover(function() {
         $(this).removeClass('ui-state-default').addClass('ui-state-hover');
    });

    $("input:button").mouseout(function() {
         $(this).removeClass('ui-state-hover').addClass('ui-state-default');
    });
});

Use jQuery.

$(document).ready(
  $('button').mouseover(function(){
     $(this).removeClass('ui-state-default').addClass('ui-state-hover');
  });

  $('button').mouseout(function(){
     $(this).removeClass('ui-state-hover').addClass('ui-state-default');
  });

);