attach event in loop, 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)); 

... использовать функцию бункером г ваши обработчики (пропуск 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');