Javascript-动态添加onmouseover时遇到问题

鉴于：

//相对于比例定位条形图
this.gDrawBars=函数（）{
//穿过所有的栅栏
对于（i=0；ithis.gData[i][1]）{
//整个酒吧都在展示吗
var isEntireBarInRange=（this.gDisplayFromthis.gData[i][1]）；
var div=document.createElement（'div'）；
div.id=“gBar”+i；
div.className='gBar'；
div.innerHTML=this.gData[i][0]；
var self=这个；
div.onmouseover=函数（）{
gBarHighlight（this，this.gData[i][1]，this.gData[i][2]）；
};
div.onmouseout=函数（）{
gBarUnHighlight（this，this.gData[i][1]，this.gData[i][2]）；
};
this.gContainer.appendChild（div）；
//this.gContainer.innerHTML++=“this.gData[i][0]+”；

底部的注释行工作正常，但我正在尝试更改它以动态添加这些函数。它需要将

this.gData[I][1]

传递到函数中，但它不能，因为I值在循环之外没有意义

---

我如何解决这个问题？即，让函数识别它被传递的是一个要使用的值，而不是一个引用。

它不是一个函数，而是一个事件。您需要将它作为事件添加到元素中：

// 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.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>";

---

请注意，以这种方式进行操作时，不会出现“开”字。

这不是函数，而是事件。您需要将其作为事件添加到元素中：

// 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.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>";

---

请注意，当您以这种方式执行时，您没有“on”字。

您需要在新的执行上下文中保留

i

的值

将分配处理程序的代码放入命名函数，并在循环中调用该函数，将

i

作为参数传递

将此函数置于

for

循环之前：

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

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

…然后在

for

循环中调用它：

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

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

---

这样，从

for

循环传递出去的

i

值将保留在

setupMouseOverOut（）

函数调用的新执行上下文中，并且设置为处理程序的新函数将引用该局部变量。

您需要在新的执行上下文中保留

i

的值

将分配处理程序的代码放入命名函数，并在循环中调用该函数，将

i

作为参数传递

将此函数置于

for

循环之前：

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

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

…然后在

for

循环中调用它：

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

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

---

这样，从

for

循环传递出去的

i

值将保留在

setupMouseOverOut（）

函数调用的新执行上下文中，并且设置为处理程序的新函数将引用该局部变量。

将This.gData替换为self.gData并使用（比执行self-do-var=this。）用self.gData替换this.gData，并使用约定（比执行self-do-var=this。）您的意思是setupMouseOverOut（div，i）；这不是吗？函数中是否正确引用了div？它是否应该引用el？@Tom-是的，我执行得太快了。编辑：我更新了。我没有很好地跟踪我的

这
用法。请参阅更新。感谢您的帮助，但我收到了一个“未捕获类型错误：无法读取未定义的gSetupMouseOverOut.el.onmouseout”错误的属性“5”，我不知道t认为函数正在读取数组，它是否应该引用self而不是this？@Tom-关于
this
vs
self
，这将取决于您希望传递给
gBarHighlight
调用的内容。
this
将是接收事件的
，而
self
将是任何
this
在您的
gDrawBars
函数中。因此，如果需要
self
，您可以添加一个额外的参数。您的意思是setupMouseOverOut（div，i）；这不是吗？函数中是否正确引用了div？它是否应该引用el？@Tom-是的，我执行得太快了。编辑：我更新了。我没有很好地跟踪我的
这
用法。请参阅更新。感谢您的帮助，但我收到了一个“未捕获类型错误：无法读取未定义的gSetupMouseOverOut.el.onmouseout”错误的属性“5”，我不知道t认为函数正在读取数组，它是否应该引用self而不是this？@Tom-关于
this
vs
self
，这将取决于您希望传递给
gBarHighlight
调用的内容。
this
将是接收事件的
，而
self
将是任何
this
在您的
gDrawBars
函数中。因此，是的，如果需要
self
，您可以添加一个额外的参数。这对我有效。添加事件侦听器有效，而不是将其作为属性动态添加。谢谢。这对我有效。添加事件侦听器有效，而不是将其作为属性动态添加。谢谢。