Функция обработчика событий вне области видимости в for

#javascript #dom-events #mouseevent #onmouseover

#javascript #dom-события #mouseevent #onmouseover

Вопрос:

Обработчик внутри моего цикла for может быть вне области видимости и выводит только «Последнее добавленное событие» в консоли, но не перебирает каждый элемент в массиве. Не уверен, где я ошибаюсь, но мне нужна помощь в подключении прослушивателя событий к каждому.

 (function () {
    if (document.addEventListener) {
        this.addEvent = function (elem, type, fn) {
            elem.addEventListener(type, fn, false);
        };
    } else if (document.attachEvent) {
        this.addEvent = function (elem, type, fn) {
            var bound = function () {
                return fn.apply(elem, arguments);
            };
            elem.attachEvent("on"   type, bound);
            return bound;
        };
    }
    if (document.getElementsByClassName) {
        this.getClass = function (className) {
            return document.getElementsByClassName(className);
        };
    } else if (document.querySelectorAll) {
        this.getClass = function (className) {
            return document.querySelectorAll("."   className);
        };
    }
    var elem = getClass("images"),
        display = getClass("display_box"),
        rolloverImage = function (e) {
            console.log("Event 'rolloverImage' triggered");
        };
    console.log(display);
    console.log(elem);
    console.log(elem.length);
    for (var i = 0; i < elem.length; i  ) {
        document.addEvent(elem[i], "mouseover", rolloverImage);
        if (i = elem.length) {
            console.log("Last event added");
        } else {
            console.log("Event added to "   elem[i]);
        }
    };
})();
 

Скрипка доступна здесь: http://jsfiddle.net/bNL5C /

Ответ №1:

если вы хотите, чтобы ваша addEvent функция была в объекте document, используйте document.addEvent = not this.addEvent = , поскольку это помещает ее в глобальный объект window

Также он не перебирает их все, потому что вы присваиваете i длину elem массива вместо сравнения.

 if (i = elem.length) {
 

должно быть

 if (i == elem.length) {
 

Из-за этого на первой итерации цикла вызывает i значение elem.length и поскольку i теперь < elem.length ваш цикл не завершается.

Ответ №2:

Одна из проблем заключается в том, что в вашем for цикле if (i = elem.length) всегда будет true , поскольку вы используете одно присваивание = и меняете значение i . Это необходимо изменить на if (i == elem.length) или, возможно, вы предпочли бы использовать === .