How to simplify event handling in Javascript?

in jQuery you can do it with

$('li.signs_LI').mouseover(MouseOver).mouseout(MouseOut);

You can also do it with

$('li.signs_LI').hover(MouseOver, MouseOut);

but this would bind the events to mouseenter and mouseleave not to mouseover and mouseout.

I'm sure you know that you can do this with CSS with the pseudo class :hover to change the style on mouse hovering.

As you assign the same event handlers to every li object, it would be much better to assign them to the parent ul element instead, making use of event bubbling. This is called event delegation:

function MouseOver(event) {
    event = event || window.event; // IE uses window.event
    var target = event.target || event.srcElement; // IE uses event.srcElement
    if(target.nodeName === 'LI') {
        target.style.fontWeight = "800";
    }
}

function MouseOut(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    if(target.nodeName === 'LI') {
        target.style.fontWeight = "100";
    }
}


// get a reference to the UL element somehow
ulElement.onmouseover = MouseOver;
ulElement.onmouseout = MouseOut;

(the node test might have to be tweaked (or even removed), this is just an example)

As mentioned in an other answer, if you just perform style adjustments, you could solve this with pure CSS. Nevertheless, event delegation is an important concept to avoid unnecessary event handler assignment.

Read more about event handling.

In case you want to change the style of an element you should use CSS as @Bart said.

But for the record, you can use one event handler on a root element like so:

var ul = document.getElementById("signs_UL"); // or select by other means.
ul.onmouseover = function (e) {
  e = e || window.event;
  var elem = e.target || e.srcElement;

  // ...
};

ul.onmouseout = function (e) {
  // ...
};

Here's classic javascript:

var onOver = function(e){
    e = e || window.event;
    var el = e.target || e.srcElement;
    el.style.fontWeight = 800;
}
var onOut = function(e){
    e = e || window.event;
    var el = e.target || e.srcElement;
    el.style.fontWeight = 100;
}
if (document.getElementsByClassName)
  var li = document.getElementsByClassName("signs_LI");
else{
  var li = [], lii = document.getElementsByTagName('LI');
  for (var l = 0; l < lii.length; l++){
    if (/\bsigns_LI\b/.test(lii[l].className))
      li.push(lii[l]);
  }
}
for (var e = 0; e < li.length; e++){
    var el = li[e];
    if (el.addEventListener) {
        el.addEventListener ("mouseover",onOver,false);
        el.addEventListener ("mouseout",onOut,false);
    } else if (el.attachEvent) {
        el.attachEvent ("onmouseover",onOver);
        el.attachEvent ("onmouseout",onOut);
    } else {
        el.onmouseover = onOver;
        el.onmouseout = onOut;
    }
}

But begs the question why you don't use standard css' :hover pseudo-class (javascript appears too heavy for this kind of manipulation).

While CSS might be what you want in your example, JavaScript/jQuery will allow you to do more, which you might want. This includes calling other functions and performing calculations.

function on(elem) { elem.style.color="#0cf"; }
function off(elem){ elem.style.color="#000"; }

// calling mouseover/out
$('.signs_LI').mouseover( function(){ on(this); })
              .mouseout( function(){ off(this); });


// hover example
$('.signs_LI').hover( function(){ on(this);  }
                    , function(){ off(this); } );