Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2013, 15:57
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

AddEventListener для массива
У меня есть массив элементов, полученный при помощи, например, querySelectorAll("div#menu ul#add li[name='my']"). Нужно добавить для всех этих элементов addEventListener (не через on+"действие", только через addEventListener!). Мне делать цикл, в котором я присвою для каждого элемента addEventListener, использовать делегирование или что-нибудь другое?

Последний раз редактировалось Valdemor, 07.07.2013 в 16:03.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2013, 16:04
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

я и не хотел присваивать метод, для меня это не подходит
Ответить с цитированием
  #3 (permalink)  
Старый 07.07.2013, 16:19
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Valdemor,
используйте делегирование
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 07.07.2013, 16:34
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

И к слову, querySelectorAll возвращает не массив, а NodeList. Это массивоподобный объект.

var collection = document.querySelectorAll('*');
alert (collection instanceof Array);
alert (collection.constructor.name);
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2013, 17:09
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

А если у меня документ, в котором элементы разбросаны по всему body? Как тогда быть?
Будет ли огромный цикл с addEventListener влиять на производительность скрипта?

Последний раз редактировалось Valdemor, 07.07.2013 в 17:14.
Ответить с цитированием
  #6 (permalink)  
Старый 07.07.2013, 17:23
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Valdemor,
вешаете обработчик на body и отлавливаете событие на нужных элементах
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2013, 17:33
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

Значит, Вы советуете делегирование.
А как же проверку делать?
if(target.getAttribute(name)=='my'&&target.parentNode.tagName=='ul'&&target.parentNode.getAttribute(id)=='add'&&target.parentNode.parentNode.tagName=='div'&&target.parentNode.parentNode.getAttribute(id)=='menu')

Странно, как-то...
И кстати, а как заменить запись типа .parentNode.parentNode? Создать метод parent(n), где n-количество работы цикла? (рекурсию не люблю использовать, т.к. работает вдвое дольше цикла).
Ответить с цитированием
  #8 (permalink)  
Старый 07.07.2013, 18:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Valdemor
А как же проверку делать?
if (target.matches('div#menu ul#add [name="my"]')){
  // do stuff
}

Но это по спецификации. В реале же нужно использовать webkitMatchesSelector || mozMatchesSelector || msMathesSelector || oMatchesSelector (http://caniuse.com/matchesselector)
Кроме того, нет никакого смысла проверять контекст элемента, имеющего id, так что ваш пример плохой.

В jQuery есть кроссбраузерный метод проверки на соответствие селектору, но даже он вам не понадобится, так как в jQuery есть удобный способ делегирования обработки событий.
Ответить с цитированием
  #9 (permalink)  
Старый 07.07.2013, 18:16
Кандидат Javascript-наук
Отправить личное сообщение для Valdemor Посмотреть профиль Найти все сообщения от Valdemor
 
Регистрация: 30.03.2012
Сообщений: 128

Я не использую jQuery по неспольким причинам.
А за код спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 07.07.2013, 18:38
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Среди этих причин есть отсутствие необходимости поддержки старых браузеров? Если нет то желаю удачи в написании кода, состоящего наполовину из костылей )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка цвета через функцию .css() сбрасывает цвет для :hover xintrea jQuery 4 18.08.2012 14:38
Создание многомерного массива из PHP ivandelov Общие вопросы Javascript 6 13.06.2012 20:01
Некорректная работа get(set)Attribute в IE для элементов img back to back Internet Explorer 15 09.06.2012 15:52
value для элемента массива Aspiring Общие вопросы Javascript 10 05.09.2010 16:52
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 13:48