Javascript - Trouble adding onmouseover dynamically

Given:

// Positions the bars relative to scale
    this.gDrawBars = function() {

        // Go through all the bars
        for (i = 0; i < this.gData.length; i++) {

            // Check part of it is within range
            if (this开发者_如何学JAVA.gDisplayFrom < this.gData[i][2] || this.gDisplayTo > this.gData[i][1]) {
                // Is the entire bar showing
                var isEntireBarInRange = (this.gDisplayFrom < this.gData[i][2] && this.gDisplayTo > this.gData[i][1]);


                var div = document.createElement('div');
                div.id = "gBar" + i;
                div.className = 'gBar';
                div.innerHTML = this.gData[i][0];

                var self = this;
                div.onmouseover = function() {
                    gBarHighlight(this, this.gData[i][1], this.gData[i][2]);
                };
                div.onmouseout = function() {
                    gBarUnHighlight(this, this.gData[i][1], this.gData[i][2]);
                };


                this.gContainer.appendChild(div);


                //this.gContainer.innerHTML += "<div id=\"gBar" + i + "\" class=\"gBar\" onmouseover=\"gBarHighlight(this, '" + this.gData[i][1] + "', '" + this.gData[i][2] + "')\" onmouseout=\"gBarUnHighlight(this, '" + this.gData[i][1] + "', '" + this.gData[i][2] + "')\">" + this.gData[i][0] + "</div>";

The commented line at the bottom works fine, but I'm trying to change it to add these functions dynamically. It needs to pass this.gData[i][1] into the functions but it can't, because the i value has no meaning outside the loop.

How can I get around this? IE, make the function recognise it's being passed a value to use and not a reference.

You need to retain the value of i in a new execution context.

Place the code that assigns the handlers into a named function, and call that in the loop, passing i as an argument.

Place this function before the for loop:

function setupMouseOverOut( el, i ){
    el.onmouseover = function() {
        gBarHighlight(this, this.gData[i][1], this.gData[i][2]);
    };
    el.onmouseout = function() {
        gBarUnHighlight(this, this.gData[i][1], this.gData[i][2]);
    };
 }

...then call it in the for loop:

setupMouseOverOut( div, i );

This way the value of i that you passed out of the for loop is retained in the new execution context of the setupMouseOverOut() function call, and the new functions you set as handlers will refer to that local variable.

It's not a function, it's an event. You need to add it as an event to the element:

div.addEventListener('mouseover', function() {
    // ...
});

Note that when you do it this way you don't have that 'on' word there.