# Обработчик события

**URL:** <https://forum.itvdn.com/t/obrabotchik-sobytiya/3392>\
**Category:** JavaScript\
**Created:** [12.06.2019 14:33:19 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392 "2019-06-12T14:33:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anton1](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@Anton1](https://forum.itvdn.com/u/Anton1)\
**Post date:** [12.06.2019 14:33:20 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392/1 "2019-06-12T14:33:20Z")

</div>

Ребята, помогите пожалуйста – необходимо в кнопке button сделать регистрацию двух обработчиков события click.  
Подскажете с кодом?!

---

<div class="post-metadata">

**Author:** ![Evgen](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/e/85f322/32.png) [@Evgen](https://forum.itvdn.com/u/Evgen)\
**Post date:** [12.06.2019 14:34:56 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392/2 "2019-06-12T14:34:56Z")

</div>

```
Попробуйте этот вариант:
        <button id="mybutton">Щелкните меня!</button>
        <script>

        var b = document.getElementById("mybutton");
        b.onclick = function() {
        alert("Спасибо, что щелкнули на мне!");
        };

    b.addEventListener("click", function() {alert('Еще раз спасибо!')}, false);
    </script>
```

---

<div class="post-metadata">

**Author:** ![Anton1](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/a/a183cd/32.png) [@Anton1](https://forum.itvdn.com/u/Anton1)\
**Post date:** [12.06.2019 14:35:23 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392/3 "2019-06-12T14:35:23Z")

</div>

Могли бы немного объяснить пожалуйста – буду признателен!

---

<div class="post-metadata">

**Author:** ![Evgen](https://forum.itvdn.com/letter_avatar_proxy/v4/letter/e/85f322/32.png) [@Evgen](https://forum.itvdn.com/u/Evgen)\
**Post date:** [12.06.2019 14:36:38 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392/4 "2019-06-12T14:36:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dietmar](https://forum.itvdn.com/user_avatar/forum.itvdn.com/dietmar/32/339_2.png) [@dietmar](https://forum.itvdn.com/u/dietmar)\
**Post date:** [12.06.2019 14:43:42 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392/5 "2019-06-12T14:43:42Z")

</div>

А почему не сделать так

`<button id="btn1">Test</button>`

```
<script>
   var b = document.getElementById("btn1");
   b.addEventListener("click", function() {alert('Еще раз спасибо!')}, false);
   b.addEventListener("click", function() {alert('Еще раз спасибо!')}, false);
</script>

```

addEventListener как раз и нужен чтобы добавить несколько обработчиков на одно и то же событие

---

<div class="post-metadata">

**Author:** ![dietmar](https://forum.itvdn.com/user_avatar/forum.itvdn.com/dietmar/32/339_2.png) [@dietmar](https://forum.itvdn.com/u/dietmar)\
**Post date:** [12.06.2019 14:47:52 UTC](https://forum.itvdn.com/t/obrabotchik-sobytiya/3392/6 "2019-06-12T14:47:52Z")

</div>

> [@Evgen](#):
>
> Многократный вызов метода addEventListener() для одного и того же объекта с теми же самыми аргументами не дает никакого эффекта - функция-обработчик регистрируется только один раз и повторные вызовы не влияют на порядок вызова обработчиков.

Это не верное утверждение

> Если вызвать функцию addEventListener() несколько раз для регистрации нескольких функций обработчиков одного типа события в одном объекте, то при возникновении события этого типа в данном объекте (или при всплывании к данному объекту, или при перехвате этого события данным объектом) будут вызваны все зарегистрированные вами функции.

Вот цитата из "Дэфида Флэнагана JavaScript. Подробное руководство"