CODEWITHSUNDEEP
javascript
lyborko
lyborko

Reputation: 2619

How to simplify event handling in Javascript?

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

Upvotes: 1

Views: 419

Answers (6)

vol7ron
vol7ron

Reputation: 42089

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

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101594

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).

Upvotes: 1

gblazex
gblazex

Reputation: 50101

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) {
  // ...
};

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816262

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.

Upvotes: 3

Florian
Florian

Reputation: 3171

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.

Upvotes: 3

Bart
Bart

Reputation: 27185

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.

Upvotes: 7

Related Questions