Эффективность слушателей Эффективность

Question

Как прослушиватели событий на любом языке программирования фактически работают внутри? Пункт этого сообщения - получить общее представление о том, как слушатели событий в целом работают. Некоторое время назад, когда я впервые начал играть с Javascript и Html, каждый раз, когда мне нужно было создать кнопку для выполнения действия, можно сказать, выполнить функцию 'my_func();', я бы просто идти ...

<button onclick="my_func();">Click me</button> 

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

---

Потом я наткнулся прослушивателях событий. В принципе, прослушиватель событий - это процедура или функция в компьютерной программе, ожидающей события. Первое, что пришло мне в голову, было следующее: когда вы создаете прослушиватель событий, это просто создает бесконечный цикл, который проверяет, было ли что-то запущено или нет? Разве это неэффективно, если у вас есть десятки или сотни событий для прослушивания? Сотни циклов проверяют разные условия каждый раз? Почему вы использовали бы это вместо красивого 'onclick'?

---

я приступаю к сообщению ответов, которые я нашел, (не в StackOverflow, поэтому я решил разместить его здесь, чтобы увеличить уже огромное содержание этого сайта). Этот ответ, из всех тех, которые я читал, был тем, который меня больше всего убедил. Однако, если вы знаете что-то, что, по вашему мнению, добавит к теме, не стесняйтесь делиться своими знаниями (тем лучше, тем лучше).

Answer 1

---

• Для практических целей, нет никакой разницы между 'OnClick' и атрибуты 'EventListener'. В общем, это именно то, что они есть, атрибуты, которые вы добавляете или удаляете из определенного объекта. В качестве следствий, поскольку они являются атрибутами, а не просто методами, они сами не зацикливаются, а вместо этого служат параметрами для «цикла общих событий», которые постоянно встречаются в вашем окне. Отсюда и отсутствие разницы в эффективности.

---

• Однако, если у вас есть тонна слушателей событий или OnClick атрибутов на тонну различных объектов, это может уменьшить общую скорость выполнения, так как общий цикл должен пройти через несколько элементов проверить, для какого-то определенного события, если есть что-то, что его слушает; но это происходит indistinctelly того, как вы обращаетесь ваши события (с слушателя, OnClick атрибутов и т.д.)

---

• Итак, я в заключение сказать, что нет практической разницы в том, как эти события обработчики обработаны.Когда конкретное событие отправляется элементу, браузер просматривает его атрибуты и/или список слушателей, связанных с этим конкретным событием, и выполняет каждый из них. Между ними нет никакой разницы в эффективности. Единственный бесконечный цикл - это «общий оконный цикл» или главный цикл событий, который обрабатывает все события, которые происходят, и ищет соответствующий объект для проверки любых обработчиков, связанных с этим событием, и если они будут найдены, он вызывает приложенная к ним функция.

---

Answer 2

Основной вопрос: Разве это неэффективно, если у вас есть десятки или сотни событий для прослушивания?

И, правда, если бы это было так, это было бы действительно неэффективно. Вот почему это не работает. Программа (в случае Java), или в браузере (в случае Javascript) получает события от операционной системы каждый раз, когда что-то происходит - когда мышь перемещается, когда ключ нажатие, когда размер окна изменяется, когда истечет время таймера, и так далее. Для каждого из этих событий браузеру необходимо выяснить, нужно ли отправлять обработчик событий. Например, при нажатии мыши на кнопку «вниз» нужно взять координаты мыши и выяснить, какие элементы находятся под ней, и затем проверить, зарегистрированы ли какие-либо прослушиватели событий для этих событий, и если да, добавьте их в очередь событий, которая будет выполнена при следующем освобождении движка.

---

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

Answer 3

Существует очень небольшая разница между запуском обработчика событий от onclick и от addEventListener. В обоих случаях он просто прикрепляет обработчик к рассматриваемому элементу DOM. Единственное существенное различие между ними заключается в том, что у вас может быть только один атрибут onclick, но каждый раз, когда вы вызываете addEventListener(), он добавляет к списку слушателей в этом элементе - внутри есть массив слушателей, на который нажимает addEventListener().

Но способ обработки обработчиков событий в основном одинаков. Когда событие клика отправляется элементу, браузер просматривает свой атрибут onclick и список слушателей click и выполняет все из них. Между ними нет никакой разницы в эффективности. Единственный бесконечный цикл - это основной цикл событий в браузере, который обрабатывает все события, полученные от ОС, нахождение соответствующих элементов DOM, просмотр, если у них есть обработчики для этого события, и вызов обработчиков.

Answer 4

Как и другие, внутренняя разница между ними не существует. Но с помощью метода addEventListener() вы можете легко прикрепить несколько функций к одному событию, а не выполнять конкатенации, когда у вас много скриптов.

с addEventListener()

Сценарий 1

myEle.addEventLister('click', myFunc); 

Сценарий 2

myEle.addEventLister('click', myFunc2); 

Вы видите, как легко прикрепить функции по событию элемента.

с использованием SetAttribute()

Сценарий 1

myEle.setAttribute('onclick', myFunc); 

Сценарий 2

myEle.setAttribute('onclick', myEle.getAttribute('onclick') + myFunc2); 

Дополнительный код немного хлопот