Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2014, 18:17
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

обработчик событий для динамически добавленных элементов
доброго времени суток всем, на 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, потом снова добавить на все, но не знаю правильно ли так сделать, если нет, то как правильнее? если да, то покажите как правильно реализовать это с ремувом, благодарю заранее)
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2014, 18:31
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

Сообщение от 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:37.
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2014, 18:33
Профессор
Посмотреть профиль Найти все сообщения от krutoy
 
Регистрация: 09.11.2014
Сообщений: 610

Сообщение от Tecvid
даже на динамически созданные элементы
Какая разница как элементы созданы? К моменту невешивания обработчиков, никакой разницы нет. Разница будет только если ты пытаешься повесить на еще не созданные элементы.
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2014, 18:45
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

Сообщение от 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();

Последний раз редактировалось Tecvid, 11.12.2014 в 18:47.
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2014, 18:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,779

Tecvid,
Сообщение от Tecvid
на jquery есть метод .on()
Сообщение от Tecvid
как это сделать на чистом javascript?
http://learn.javascript.ru/event-delegation
Ответить с цитированием
  #6 (permalink)  
Старый 11.12.2014, 18:53
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

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

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

Последний раз редактировалось Tecvid, 11.12.2014 в 18:56.
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2014, 18:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,779

Tecvid,
подходит именно делегирование под условие вашей задачи. ставите на контейнер клик в клике определяите источник -- если источник имеет класс modify запускаите функцию
Ответить с цитированием
  #8 (permalink)  
Старый 11.12.2014, 19:00
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

рони,
хм понятно, спасибо большое)
Ответить с цитированием
  #9 (permalink)  
Старый 11.12.2014, 19:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,779

Tecvid,
для вашей задачи цикл ненужен
Ответить с цитированием
  #10 (permalink)  
Старый 11.12.2014, 19:10
Профессор
Отправить личное сообщение для Tecvid Посмотреть профиль Найти все сообщения от Tecvid
 
Регистрация: 13.12.2013
Сообщений: 175

рони,
тогда получается что 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();


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

Последний раз редактировалось Tecvid, 11.12.2014 в 19:12.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка событий на динамически созданных объектах Alexey_R jQuery 28 15.02.2017 14:28
Блокировка событий всех дочерних элементов moreo Элементы интерфейса 4 26.05.2012 22:58
Некорректно работает функция для создания элементов exec Общие вопросы Javascript 4 13.07.2010 10:15
Использование одной функции для элементов с разными ID Ferroks Общие вопросы Javascript 10 11.09.2009 07:51
обработчик собития onMouseOver для фрейма Rian Events/DOM/Window 7 06.06.2008 18:48