이벤트 루프에 붙이기, 자바 스크립트

Question

나는 이것이 "고전적"이며 이미이 주제에 대해 다른 설명적인 기사를 읽으려고 시도 했음에도 불구하고 여전히 어떻게 든 그것을 잘못 관리하고있다. 자바 스크립트 루프에서 이벤트 핸들러와 함수를 추가하는 것에 대해 이야기하고 있습니다.

여기에 문제 (그것이 제안 박스/자동 완성의)

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 라인 내 코드입니다. 자바 스크립트 의이 부분은 너무 이상한/까다로운 :) 친절한 전문가가 그 두 줄을 수정하는 데 도움이 될 수 있습니까?

---

이

은 절반 방법의 수정이다 (I 생각 (:

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 규격 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); 
    } 
} 

그런 다음,이 두 라인 대신에 :

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