Форум

Tecvid · #1 (**permalink**) 11.12.2014, 19: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 · #2 (**permalink**) 11.12.2014, 19: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 · #3 (**permalink**) 11.12.2014, 19:33

Сообщение от Tecvid

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

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

Tecvid · #4 (**permalink**) 11.12.2014, 19: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();

рони · #5 (**permalink**) 11.12.2014, 19:48

Tecvid,

Сообщение от Tecvid

на jquery есть метод .on()

Сообщение от Tecvid

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

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

Tecvid · #6 (**permalink**) 11.12.2014, 19:53

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

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

рони · #7 (**permalink**) 11.12.2014, 19:58

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

Tecvid · #8 (**permalink**) 11.12.2014, 20:00

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

рони · #9 (**permalink**) 11.12.2014, 20:00

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

Tecvid · #10 (**permalink**) 11.12.2014, 20: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();

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

Форум

Справочник

Discord чат

Курсы javascript