0

Почему не работает addEventListener для className в моем случае?

<a href="#" class="fileSelect"><img class="ad" src="img/add.png"></a>
<input class="image" name="images[]" accept="image/*" style="display:none" type="file">

JS

var fileSelect = document.getElementsByClassName("fileSelect"),
fileElem = document.getElementsByClassName("image");

fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); 
}, false);

Если class изменить на id, то все работает.

2

1 ответ 1

0

Как сделать, чтобы работало:

// Привязка события к конкретному элементу
function bindEvent(element, type, handler) {
    if(element.addEventListener) {
       element.addEventListener(type, handler, false);
    } else {
       element.attachEvent('on'+type, handler);
    }
}

// Привязка события к выборке элементов
function bindEventAll(NodeList, type, handler) {
    for (var i = 0; i < NodeList.length; ++i) {
        var element = NodeList[i];
        bindEvent(element, type, handler);
    }
}

// Инициация события на элементе
function fireEvent(element, event) {
    var fireOnThis = element;
    if (document.createEvent) {
        var evObj = document.createEvent('MouseEvents');
        evObj.initEvent(event, true, false);
        fireOnThis.dispatchEvent(evObj);
    } else if (document.createEventObject) {
        var evObj = document.createEventObject();
        fireOnThis.fireEvent('on' + event, evObj);
    }
}

// Инициация события на выборке элементов
function fireEventAll(NodeList, event) {
    for (var i = 0; i < NodeList.length; ++i) {
        var element = NodeList[i];
        fireEvent(element, event);
    }
}

Допустим, есть такая разметка:

<div class="initiator">Click me!</div>
<div class="target">And me!</div>

Сделаем так, чтобы кликая по initiator, мы инициировали клик и по target.

var initiator = document.getElementsByClassName('initiator');
var target = document.getElementsByClassName('target');

bindEventAll(initiator, 'click', function () {
    // Передаем событие дальше
    fireEventAll(target, 'click');
});

bindEventAll(target, 'click', function () {
    alert(this.className + ' has received your click');
});

// выведет: target has received your click

Демонстрация

Update: складывается такое ощущение, что вы смешиваете функционал jQuery и vanilla javascript. jQuery - это библиотека. Функций click() и preventDefault() в обычном javascript нет, если вы их сами не напишите.

5
  • да работает, но теперь ошибку выдает на fileElem.click(). Пишет что типа нету такой функции.
    – ager32
    22 авг 2014 в 16:51
  • @ager32, я обновил свой ответ.
    – VenZell
    22 авг 2014 в 17:23
  • Вопрос решен, спасибо.
    – ager32
    22 авг 2014 в 17:34
  • @VenZell почитайте внимательно здесь w3.org/TR/DOM-Level-2-Events/events.html#Events-Event
    – zb'
    22 авг 2014 в 18:34
  • 1
    @eicto, я был не прав. Очевидно, что плохо знаю спецификацию и поспешил с выводами
    – VenZell
    22 авг 2014 в 19:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.