Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   AddEventListener для массива (https://javascript.ru/forum/events/39658-addeventlistener-dlya-massiva.html)

Valdemor 07.07.2013 16:57

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

Valdemor 07.07.2013 17:04

я и не хотел присваивать метод, для меня это не подходит

cyber 07.07.2013 17:19

Valdemor,
используйте делегирование

danik.js 07.07.2013 17:34

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

var collection = document.querySelectorAll('*');
alert (collection instanceof Array);
alert (collection.constructor.name);

Valdemor 07.07.2013 18:09

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

cyber 07.07.2013 18:23

Valdemor,
вешаете обработчик на body и отлавливаете событие на нужных элементах

Valdemor 07.07.2013 18:33

Значит, Вы советуете делегирование.
А как же проверку делать?
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-количество работы цикла? (рекурсию не люблю использовать, т.к. работает вдвое дольше цикла).

danik.js 07.07.2013 19:07

Цитата:

Сообщение от Valdemor
А как же проверку делать?

if (target.matches('div#menu ul#add [name="my"]')){
  // do stuff
}

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

В jQuery есть кроссбраузерный метод проверки на соответствие селектору, но даже он вам не понадобится, так как в jQuery есть удобный способ делегирования обработки событий.

Valdemor 07.07.2013 19:16

Я не использую jQuery по неспольким причинам.
А за код спасибо!

danik.js 07.07.2013 19:38

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


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