Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   обработчик событий для динамически добавленных элементов (https://javascript.ru/forum/events/52288-obrabotchik-sobytijj-dlya-dinamicheski-dobavlennykh-ehlementov.html)

Tecvid 11.12.2014 18:17

обработчик событий для динамически добавленных элементов
 
доброго времени суток всем, на jquery есть метод .on() который вешает обрабочик даже на динамически созданные элементы, как это сделать на чистом javascript? копал в сторону addEventListener, но почему-то не срабатывает
var modify = document.querySelectorAll('.modify');
for (var i = 0; i < mod2.length; i++) {
    mod2[i].addEventListener('click', function() {
        alert(1);
    });
}
// правильно ли навешал обработчик на элементы с одинаковым классом ?


подумал реализовать через так: при добавлении нового элемента удалить обработчик через removeEventListener, потом снова добавить на все, но не знаю правильно ли так сделать, если нет, то как правильнее? если да, то покажите как правильно реализовать это с ремувом, благодарю заранее)

krutoy 11.12.2014 18:31

Цитата:

Сообщение от Tecvid
// правильно ли навешал обработчик на элементы с одинаковым классом ?

Нет конечно
<html>
<head>
</head>
<body>

<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>

<script>

var mod2 = document.querySelectorAll('.modify');
for (var i = 0; i < mod2.length; i++) {
    mod2[i].addEventListener('click', function() {
        alert(1);
    });
}
</script>
</body>
</html>

И, кстати, при таокм раскладе лучше делать вот так
<html>
<head>
</head>
<body>

<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>
<div class="modify">div</div>

<script>

f=function(){alert(1)}
var mod2 = document.querySelectorAll('.modify');
for (var i = 0; i < mod2.length; i++) {
    mod2[i].addEventListener('click', f);
}
</script>
</body>
</html>

дабы не засирать память бестолку

krutoy 11.12.2014 18:33

Цитата:

Сообщение от Tecvid
даже на динамически созданные элементы

Какая разница как элементы созданы? К моменту невешивания обработчиков, никакой разницы нет. Разница будет только если ты пытаешься повесить на еще не созданные элементы.

Tecvid 11.12.2014 18:45

Цитата:

Сообщение от krutoy
И, кстати, при таокм раскладе лучше делать вот так

ага понятно, спасибо большое, хотел убедиться что навешивание в цикле не является плохим)
Цитата:

Сообщение от krutoy
Разница будет только если ты пытаешься повесить на еще не созданные элементы.

я как это имел ввиду, наверное неверно выразился;
кстати, за это время попробад сделать вот так для не ещё несозданных элементов:
function modify() {
    alert(1);
}
    
function addModEvent() {
    var mod = document.querySelectorAll('.modify');
    for (var i = 0; i < mod.length; i++) {
        mod[i].addEventListener('click', modify);
    }
}
addModEvent(); // для уже сущесвующих
    
function removeModEvent() {
    var mod = document.querySelectorAll('.modify');
    for (var i = 0; i < mod.length; i++) {
        mod[i].removeEventListener('click', modify);
   }
}

// для ещё не созданных
parentElem.appendChild(newElem); // ну условно
removeModEvent();
addModEvent();

рони 11.12.2014 18:48

Tecvid,
Цитата:

Сообщение от Tecvid
на jquery есть метод .on()

Цитата:

Сообщение от Tecvid
как это сделать на чистом javascript?

http://learn.javascript.ru/event-delegation

Tecvid 11.12.2014 18:53

рони,
я как раз перед этим вопросом прочитал этот урок) но либо он не подходит для моей задачи, либо я не смог адаптировать его под неё

задача такая, есть один контейнер - див, в нём множество одинаковых дивов с одинаковым классом, и каждый из них имеет кнопку (див) с классом modify, без какого либо id или ещё что-то который уникален, то есть мне кажется что по любому надо перебирать в цикле, либо я что-то недопонял

рони 11.12.2014 18:58

Tecvid,
подходит именно делегирование под условие вашей задачи. ставите на контейнер клик в клике определяите источник -- если источник имеет класс modify запускаите функцию

Tecvid 11.12.2014 19:00

рони,
хм понятно, спасибо большое)

рони 11.12.2014 19:00

Tecvid,
для вашей задачи цикл ненужен

Tecvid 11.12.2014 19:10

рони,
тогда получается что target нужно вставить внутри handler при addEventListener?

function hasClass(elem, cls) {
    // ...
    return true;
}

function modify() {
    var event = e || window.event;
    var target = event.target || event.srcElement;
    if (hasClass(target, 'modify')) {
        addModEvent();
    }
}
    
function addModEvent() {
    parentElem.addEventListener('click', modify);
}
addModEvent();


так верно будет?


Часовой пояс GMT +3, время: 15:29.