This is probably a very simple question. How would you reasonably simplify this awesome code? I am going to add much more eventhandlers and list items, and I can not believe, it is the only "solution". I am new to javascript (but not in programming).

    function MouseOver(elem)
    {
    elem.style = "font-weight:800;";
    }

    function MouseOut(elem)
    {
    elem.style = "font-weight:100;";
    }
...
    <ul class="signs_UL" style="color:#039">
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">G</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">D</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DD</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Dzw</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Do</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Gkomb</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DGkomb</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DGkonf</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DGkont</li>    
    </ul> 

thanx a lot

This is probably a very simple question. How would you reasonably simplify this awesome code? I am going to add much more eventhandlers and list items, and I can not believe, it is the only "solution". I am new to javascript (but not in programming).

    function MouseOver(elem)
    {
    elem.style = "font-weight:800;";
    }

    function MouseOut(elem)
    {
    elem.style = "font-weight:100;";
    }
...
    <ul class="signs_UL" style="color:#039">
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">G</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">D</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DD</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Dzw</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Do</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Gkomb</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DGkomb</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DGkonf</li>
        <li class="signs_LI" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">DGkont</li>    
    </ul> 

thanx a lot

• javascript

Share Improve this question Follow asked Feb 13, 2011 at 22:01 lyborkolyborko 2,62933 gold badges2929 silver badges5757 bronze badges 6

• i know that with jQuery you can assign handler to all elements of class (signs_LI) with one line. but i don't know how :( – Andrey Commented Feb 13, 2011 at 22:03
• 1 Do you mind using jQuery? or do you want to stick with classic JS? – Brad Christie Commented Feb 13, 2011 at 22:03
• 1 this would be relatively easy to do with jQuery... – Brian Driscoll Commented Feb 13, 2011 at 22:05
• I downloaded jQuery today (couple hours ago), I do not mind to use it.... :-) – lyborko Commented Feb 13, 2011 at 22:10
• 1 use css :hover. its much more ideal IMO. – KJYe.Name Commented Feb 13, 2011 at 22:13

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 7

If all you want to do is related to styling, you should use css instead of javascript:

ul.signs_UL li {
    font-weight: 100;
}

ul.signs_UL li:hover {
    font-weight: 800;
}

Will automatically change the font-weight on hovering over any list item in a signs_UL list.

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); } );