附加事件循环，javascript

Question

I know this is a "classic" and I already tried to read different explanatory articles on this subject, but I still manage to do it wrong somehow. I am talking about adding event handlers and functions in a javascript loop.

Here is my code with problems (it's a suggest-box / auto complete)

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

It is (of course) the attachevent lines that do not work. This part of javascript is so weird/tricky :) Can a kind expert help me fix those two lines?

---

This is a half-way fix (I think(:

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

It looks like this now, but still no "action"

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

One possibility is because attachEvent is IE-specific. You'll have to use attachEventListener in many other browsers.

And, to use the "proper" method for the current browser, you'll need to feature-detect them ( snippet from MDN ):

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

You can also create a function to aid in this:

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

Then, in place of these 2 lines:

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

...use the function to bind your handlers (skipping the on in the event type argument):

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

---

You could also just enclose the <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');