CODEWITHSUNDEEP
javascripthtml
William Kinaan
William Kinaan

Reputation: 28799

How do I reduce the use of onmouseover and onmouseoutt?

On my page I numerous sections that I want to highlight when the mouse goes over. This can be accomplished using onmouseover and onmouseout. I have more than 100 sections though and I don't think that it is very efficient to call the methods on each section. Like so.

<li id="1" onmouseover="h(1)" onmouseout="h(1)">
    <label>1</label>
</li>
<li id="2" onmouseover="h(2)" onmouseout="h(2)">
    <label>2</label>
</li>
<li id="3" onmouseover="h(3)" onmouseout="h(3)">
    do something
</li>
...
<li id="4" onmouseover="h(4)" onmouseout="h(4)">
    do something
</li>

I'm hoping to get this answer in Javascript as I do not know jQuery.

Upvotes: 3

Views: 223

Answers (5)

Felix Kling
Felix Kling

Reputation: 816364

What you are after is event delegation. That is binding the event handler to a common ancestor. In your case it could be something along the lines:

// assuming `ul` refers to the list element that contains those `li` elements
ul.onmouseover = function(event) {
    // some cross-browser handling (IE)
    event = event || window.event;
    var target = event.target || event.srcElement;

    // if the event was triggered on a `li` element
    if(target.nodeName === 'LI') {
        h(this.id);  // do the stuff
    }
};

DEMO

This is only an example and you have to adjust it to your needs, e.g. if the li elements contain elements themselves, things are a bit different.

I recommend to read the great articles on quirksmode.org if you want to learn more about event handling.

That said, jQuery would make this a lot easier, also because it simulates the mouseenter and mouseleave events from IE, which are much more useful, and takes care of the cross-browser issues.

For example:

$('#listId').on('mouseenter', 'li', function() {
    h(this.id);
});

$('#listId').on('mouseleave', 'li', function() {
    h(this.id);
});

If you work a lot with event handling and/or DOM manipulation, jQuery is really to be recommended.

Upvotes: 6

Jack
Jack

Reputation: 15872

Pretty simple solution:

HTML: For each <li> elements which you would want to perform an action once the mouse is placed over / out, assign a class value. In this example I have used the class name 'someclass' however you could change this to whatever you feel best suits it. Please also note that an element can have multiple classes. e.g. <li class="someclass anotherclass"></li> .

<ul>
  <li class="someclass secondaryclass">Example</li>
  <li class="someclass">Example</li>
  <li class="someclass">Example</li>
  <li class="someclass">Example</li>
<ul>​

JavaScript: Loop through all elements with the class name 'someclass', and attach the event listeners. In this example I have mitigated the 'out' and 'over' function declarations, however look at the jsFiddle example bellow to see them in action.

for(var i in document.getElementsByClassName('someclass'))
{
    document.getElementsByClassName('someclass')[i].addEventListener('mouseover', over ,false);
    document.getElementsByClassName('someclass')[i].addEventListener('mouseout', out ,false);   
}

http://jsfiddle.net/eVs9L/ <-- view the Browser console to see the output of the mouse over / out function output.

jQuery approach:

$('.someclass').hover(function(){
  //Mouse Over Code goes here...
}, function(){
  //Mouse Out code goes here...
});

Upvotes: 1

mgraph
mgraph

Reputation: 15338

<li id="1" class="btn">
do something
</li>

js:

<script type="text/javascript">
    window.onload = function(){
       var allBtns = document.getElementsByClassName("btn");
       for (var i = 0; i < allBtns.length; i++) {
         allBtns[i].onmouseover = function(){h(this.id)};
         allBtns[i].onmouseout = function(){h(this.id)};
        }
     }
</script>

or:

<ul class="myBTNS">
   <li id="1">do something</li>
   <li id="2">do something</li>
<ul>

js:

<script type="text/javascript">
    window.onload = function() {
        var btnsContainer = document.getElementsByClassName("myBTNS");
        for (var i = 0; i < btnsContainer.length; i++) {
            var allBtns = btnsContainer[i].getElementsByTagName("li");
            for (var i = 0; i < allBtns.length; i++) {
                allBtns[i].onmouseover = function() {h(this.id)};
                allBtns[i].onmouseout = function() {h(this.id)};
            }
        }
    }
</script>

​

Upvotes: 1

jumpnett
jumpnett

Reputation: 7217

You can use document.getElementsByTagName to get all you li elements and store them in an array. Then it is just a matter of looping through the array and assigning a function to the onmouseover and onmouseout events.

var elems = document.getElementsByTagName('li');
for (var i = 0; i < elems.length; i++) {
    elems[i].onmouseover = function () {
        this.innerHTML = "over";
        this.style.background = "yellow";
    };
    elems[i].onmouseout = function () {
        this.innerHTML = "out";
        this.style.background =  "white";
    };
}

Here is a link to a demo in jsFiddle. I made the function change the text and bg color just to demonstrate the the code is actually doing something.

Upvotes: 0

iWizard
iWizard

Reputation: 7104

Yes, answer is using jQuery .each.

Link: http://api.jquery.com/each/

Upvotes: 0

Related Questions