Question

假设：

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

底部的注释行工作正常，但我正在尝试更改它以动态添加这些功能。它需要将this.gData[i][1]传递给函数，但它不能，因为i值在循环外没有任何意义。

我该如何解决这个问题？ IE，使函数识别它正在传递一个值而不是引用。

Answer 1

这不是一个功能，它是一个事件。您需要将其作为事件添加到元素中：

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

请注意，当你这样做的时候，那里没有'on'字样。

Answer 2

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

将指定处理程序的代码放入命名函数中，并在循环中调用它，并将i作为参数传递。

将此函数放在 for循环之前

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循环中调用它：

setupMouseOverOut( div, i );

这样，您从i循环中传出的for的值将保留在setupMouseOverOut()函数调用的新执行上下文中，以及您设置为处理程序的新函数将引用该局部变量。

Javascript - 无法动态添加onmouseover

2 个答案: