прикрепить событие в цикле, JavaScript - PullRequest
Новая
       7

прикрепить событие в цикле, JavaScript

1 голос
/ 06 февраля 2012

Я знаю, что это «классика», и я уже пытался читать разные пояснительные статьи на эту тему, но мне все же удается как-то ошибиться.Я говорю о добавлении обработчиков событий и функций в цикле 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]);
    }
}
}

Ответы [ 2 ]

2 голосов
/ 06 февраля 2012

Одна из возможностей заключается в том, что attachEvent зависит от IE.Вам нужно будет использовать attachEventListener во многих других браузерах.

И, чтобы использовать «правильный» метод для текущего браузера, вам нужно будет определить их особенности ( фрагмент из 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));

... используйте функцию для привязки ваших обработчиков (пропуская 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);
0 голосов
/ 06 февраля 2012

Попробуйте это: 

divholders[i].attachEvent('onmouseover', this.style.backgroundColor='#266699');
...