ループ内のイベントを添付する、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のこの部分はとても奇妙な/トリッキー:)親切な専門家は、私はそれらの2つの行を修正することができますか？

---

この

はハーフウェイの修正です（私は思う（：

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

次に、これらの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');