LINUX.ORG.RU

В каких случаях используется addEventListener?

 ,


0

1

Я часто вижу в коде сабж с параметром «click», например. Но ведь есть свойство onclick. В каких, вообще случаях необходимо навешивать сабж? Какие у него преимущества перед onclick, onload и прочими? В чем разница?

Несколько обработчиков на событие, если не ошибаюсь.

Razip ★★ ()

Вы­зов ме­то­да addEventListener() со стро­кой «click» в пер­вом ар­гу­мен­те ни­как не влия­ет на зна­че­ние свой­ст­ва onclick. ... Но важ­нее то, что ме­тод add­Event­Listener() мож­но вы­звать не­сколь­ко раз и за­ре­ги­ст­ри­ро­вать с его по­мо­щью несколь­ко функ­ций-об­ра­бот­чи­ков для од­но­го и то­го же ти­па события в том же са­мом объ­ек­те. При по­яв­ле­нии со­бы­тия в объ­ек­те бу­дут вы­зва­ны все об­ра­бот­чи­ки, за­ре­ги­ст­ри­ро­ван­ные для это­го ти­па со­бы­тия, в по­ряд­ке их ре­ги­ст­ра­ции.

«JavaScript. Подробное руководство. Флэнаган Д.» А ещё про это написано практически в любом туториале про обработку событий в JS.

Weres ★★★ ()
Ответ на: комментарий от Weres

Неубедительно

fu1=function(){console.log(1)}
fu2=function(){console.log(2)}
fu3=function(){console.log(3)}

all=function(){fu1(); fu2(); fu3()}

div=document.createElement("div")
div.innerHTML="foo"
div.onclick=all
document.body.appendChild(div)
Еще раз: в чем разница кроме сахара?

anonimous ()

onclick это устаревшее говно со времён, когда писали <button onclick=«foo();»>bla</button>. Сейчас принято использовать addEventListener.

Legioner ★★★★★ ()
Ответ на: комментарий от Legioner

Я спрашиваю, в чем разница? Какие юзкейсы. Или это просто заменили х*й на х*й?

anonimous ()
Ответ на: комментарий от anonimous

А в чём может быть разница? addEventListener удобней. Вот тебе пример, когда ты не сможешь заменить его onclick:

// library 1
div.addEventListener('click', divClick1);
div.addEventListener('click', divClick2);
...
div.removeEventListener('click', divClick1);

// library 2
div.addEventListener('click', divClick3);

Всё, что тебе доступно с onclick это chaining вызовов (сохраняешь предыдущий обработчик и в своём обработчике вызываешь его). Это куда более бедная модель, чем нормальный список listener-ов.

Legioner ★★★★★ ()
Ответ на: комментарий от anonimous

Господи, что за говнокод?

Если вам нужно повесить на объект обработчик, не удаляя старые, при этом вы не знаете, какие обработчики на нем уже висят, что вы будете делать? Вы разбираете языки программирования на небольших примерах, ни во что толком не погружаясь, но большие (даже относительно большие) программные проекты обладают уже другой сложностью. Напишите что-нибудь хорошее и большое, может полегчает.

Weres ★★★ ()
Ответ на: комментарий от Weres

не удаляя старые, при этом вы не знаете, какие обработчики на нем уже висят, что вы будете делать?

Например вот так можно:

;(function(oldf){div.onclick=function(){console.log("Goodbye"); oldf()}}(div.onclick))

anonimous ()
Ответ на: комментарий от anonimous

А если часть из них добавлена через addEventListener (и даже не вами)? А если часть из них нужно удалить, не тронув остальные?

Weres ★★★ ()
Ответ на: комментарий от Legioner
libEvents={
   __proto__: null,
   divClick1: function(){console.log(1)},
   divClick2: function(){console.log(2)},
   all: function(){
      for(var i in libEvents){
         if(i!=="all"){ libEvents[i]()}
      }
   }
}

div=document.createElement("div")
div.innerHTML="foo"
div.onclick=libEvents.all
document.body.appendChild(div)

libEvents.divClick3=function(){console.log(3)}
anonimous ()
Ответ на: комментарий от Weres

А если часть из них добавлена через addEventListener (и даже не вами)?

В этом то и проблема. Тащат в язык синтаксическую грязь, а потом спрашивают «а что Вы будете делать, если Вам мешает наша грязь?»

Не знаю, надо на досуге поковыряться. Я не спец. Если окружение в которое addEventsListener свое дерьмо складывает доступно для read/write, можно это решить.

anonimous ()
Ответ на: комментарий от anonimous

А зачем такие жертвы? Вот реализовали вы обертку вокруг onclick, которая позволяет сохранять старый обработчик, если припрет, то можно реализовать и функцию удаления (приводить onclick к строке, парсить и удалять). Это задачи, которые часто требуются, поэтому в языке есть решение, единообразное и удобное. Пишите на ассемблере, зачем вам это грязный js.

Weres ★★★ ()
Ответ на: комментарий от Weres

Чем больше мусора, тем трудней писать, ибо обрабатывать приходится больше случаев. Компромисным решением могло бы быть добавление фич через либы. Либу, по крайней мере, можно модифицировать при необходимости. А эти уроды срут в ядро.

anonimous ()
Ответ на: комментарий от anonimous

Вы Tcl не пробовали? Говорят, очень минималистичный язык.

Есть практическая задача, которая имеет практическое решение. Включение такой функции в ядро позволяет не разбираться с кучей велосипедов, которые каждый разраб наворотит в силу того, что нужных вещей под рукой не окажется.

Weres ★★★ ()
Ответ на: комментарий от Weres

Вы Tcl не пробовали?

Ковырял. Возможно, это лучший ЯП из существующих. Но активно им не занимаюсь, т.к. массово он к сожалению, не применяется. Чтобы писать на таком ЯП, надо иметь мозг.

Есть практическая задача, которая имеет практическое решение. Включение такой функции в ядро позволяет не разбираться с кучей велосипедов, которые каждый разраб наворотит в силу того, что нужных вещей под рукой не окажется.

Взгляните сюда:

Почему не стоит пользовать addEventListener

Это ответ на ваш вопрос.

anonimous ()
Ответ на: комментарий от anonimous

А кто будет юзать твою libevents-то? onclick переназначат и всё. То, что ты пишешь, надо сначала продвинуть в стандарт и обязать всех использовать. И в итоге получится худшая версия addEventListener-а.

Legioner ★★★★★ ()

В каких случаях используется addEventListener?

Во всех. Практически.

ya-betmen ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.