Question

我知道这是一个“经典”，我已经尝试阅读关于这个主题的不同解释性文章，但我仍然设法以某种方式做错了。我在谈论在javascript循环中添加事件处理程序和函数。

这是我的代码有问题（这是一个建议框/自动完成）

function autoCompleteCB(results) {
document.getElementById('autocom').innerHTML = '';
if (results.length == 0) {
    document.getElementById('autocom').style.display = 'none';
} else {
    document.getElementById('autocom').style.display = 'block';
    var divholders = [];
    for (var i = 0; i < results.length; i++) {
        divholders[i] = document.createElement('div');
        divholders[i].style.width = '350px';
        var divrestext = document.createElement('div');
        divrestext.className = 'autocom0';
        divrestext.innerHTML = results[i][0];
        divholders[i].appendChild(divrestext);
        var divrestype = document.createElement('div');
        divrestype.className = 'autocom1' + results[i][1];
        divrestype.innerHTML = results[i][1];
        divholders[i].appendChild(divrestype);
        divholders[i].attachEvent('onmouseover', (function(i) { return function() { divholders[i].style.backgroundColor='#266699'; }; })(i));
        divholders[i].attachEvent('onmouseout', (function (i) { return function() { divholders[i].style.backgroundColor = '#F5F5F5'; }; })(i));
        document.getElementById('autocom').appendChild(divholders[i]);
    }
}
}

（当然）attachevent行不起作用。这部分javascript是如此奇怪/棘手:)一位善良的专家可以帮我修复这两行吗？

这是一个中途修复（我想（：

function bindEvent(element, type, listener) {
if (element.addEventListener) {
    element.addEventListener(type, listener, false);
} else if (element.attachEvent) {
    element.attachEvent('on' + type, listener);
}
}
function autoCompleteCB(results) {
document.getElementById('autocom').innerHTML = '';
if (results.length == 0) {
    document.getElementById('autocom').style.display = 'none';
} else {
    document.getElementById('autocom').style.display = 'block';
    var divholders = [];
    for (var i = 0; i < results.length; i++) {
        divholders[i] = document.createElement('div');
        divholders[i].style.width = '350px';
        var divrestext = document.createElement('div');
        divrestext.className = 'autocom0';
        divrestext.innerHTML = results[i][0];
        divholders[i].appendChild(divrestext);
        var divrestype = document.createElement('div');
        divrestype.className = 'autocom1' + results[i][1];
        divrestype.innerHTML = results[i][1];
        // BIND THE EVENTS
        divholders[i].appendChild(divrestype);
        document.getElementById('autocom').appendChild(divholders[i]);
    }
}
}

现在看起来像这样，但仍然没有“行动”

function autoComplete() {
var ss = document.getElementById('txbkeyword').value;
if (ss.length > 0) { CSearch.SearchAutoComplete(ss, 3, autoCompleteCB); }
else { document.getElementById('autocom').style.display = 'none'; }

}
function bindEvent(element, type, listener) {
if (element.addEventListener) {
    element.addEventListener(type, listener, false);
} else if (element.attachEvent) {
    element.attachEvent('on' + type, listener);
}
}
function autoCompleteCB(results) {
document.getElementById('autocom').innerHTML = '';
if (results.length == 0) {
    document.getElementById('autocom').style.display = 'none';
} else {
    document.getElementById('autocom').style.display = 'block';
    var divholders = [];
    for (var i = 0; i < results.length; i++) {
        divholders[i] = document.createElement('div');
        divholders[i].style.width = '350px';
        var divrestext = document.createElement('div');
        divrestext.className = 'autocom0';
        divrestext.innerHTML = results[i][0];
        divholders[i].appendChild(divrestext);
        var divrestype = document.createElement('div');
        divrestype.className = 'autocom1' + results[i][1];
        divrestype.innerHTML = results[i][1];
        (function (i) {
            bindEvent(divholders[i], 'mouseover', function () {
                divholders[i].style.backgroundColor = '#266699';
            });
            bindEvent(divholders[i], 'mouseout', function () {
                divholders[i].style.backgroundColor = '#F5F5F5';
            });
        })(i);
        divholders[i].appendChild(divrestype);
        document.getElementById('autocom').appendChild(divholders[i]);
    }
}
}

Answer 1

一种可能性是因为attachEvent是IE特定的。您必须在许多其他浏览器中使用attachEventListener。

并且，要为当前浏览器使用“正确”方法，您需要对它们进行功能检测（snippet from MDN）：

if (el.addEventListener){
  el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

你也可以创建一个函数来帮助：

function bindEvent(element, type, listener) {
    if (element.addEventListener) {
        element.addEventListener(type, listener, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, listener);
    }
}

然后，代替这两行：

divholders[i].attachEvent('onmouseover', (function(i) { return function() { divholders[i].style.backgroundColor='#266699'; }; })(i));
divholders[i].attachEvent('onmouseout', (function (i) { return function() { divholders[i].style.backgroundColor = '#F5F5F5'; }; })(i));

...使用该函数绑定处理程序（跳过事件类型参数中的on）：

(function (i) {
    bindEvent(divholders[i], 'mouseover', function () {
        divholders[i].style.backgroundColor = '#266699';
    });
    bindEvent(divholders[i], 'mouseout', function () {
        divholders[i].style.backgroundColor = '#F5F5F5';
    });
})(i);

您也可以将<div>：

括起来

(function (div, i) {
    bindEvent(div, 'mouseover', function () {
        div.style.backgroundColor = '#266699';
    });
    bindEvent(div, 'mouseout', function () {
        div.style.backgroundColor = '#F5F5F5';
    });
})(divholders[i], i);

Answer 2

试试这个：

divholders[i].attachEvent('onmouseover', this.style.backgroundColor='#266699');

在循环中附加事件，javascript

2 个答案: