在循環中附加事件，javascript

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-spec IFIC。您必須在其他許多瀏覽器中使用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); 
    } 
} 

然後，在這些地方2行：

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

...使用函數來斌d的處理程序（跳過事件類型參數的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');