Почему addEventListener для кастомного события вешается на id для которого нет dispatchEvent?

Question

Почему событие addEventListener вешается на rabbit ? Разве после "let event = new CustomEvent..." не должно быть rabbit.dispatchEvent(event) ? Как этот листенер вообще работает?

  <pre id="rabbit">
    |\   /|
     \|_|/
     /. .\
    =\_Y_/=
     {>o<}
  </pre>
  <button onclick="hide()">Hide()</button>

  <script>
    function hide() {
      let event = new CustomEvent("hide", {
        cancelable: true
      });
      if ( !rabbit.dispatchEvent(event) ) {
        alert('отменено обработчиком');
      } else {
        rabbit.hidden = true;
      }
    }

    rabbit.addEventListener("hide", function(event) {
      if ( confirm("вызвать preventDefault?") ) {
        event.preventDefault();
      }
    });
  </script>

Answer 1

Не совсем понял ход ваших мыслей. Но постараюсь объяснить работу кастомного события на странице.

Не буду заострять внимание на страницу с rabbit и Hide() button. Есть и всё
Обекты создались запускаем основной скрипт
Объявление метода hide который вызывается на событие click кнопки (button)
Подписываемся на кастомное событие "hide" rabbit.

Далее при нажатии кнопки вызывается метод hide(). Которое создаёт event и передает его вызовом rabbit.dispatchEvent на строке if ( !rabbit.dispatchEvent(event) ) { который вызывает обработчик события hide.

Почему событие addEventListener вешается на rabbit? -- Вешайте куда угодно. Не забывайте диспачить куда нужно.

<pre id="rabbit">
    |\   /|
     \|_|/
     /. .\
    =\_Y_/=
     {>o<}
  </pre>
  <button onclick="hide()" id="norabit">Hide()</button>

  <script>
    function hide() {
      let event = new CustomEvent("hide", {
        cancelable: true
      });
      if ( !norabit.dispatchEvent(event) ) {
        alert('отменено обработчиком');
      } else {
        rabbit.hidden = true;
      }
    }

    norabit.addEventListener("hide", function(event) {
      if ( confirm("вызвать preventDefault?") ) {
        event.preventDefault();
      }
    });
  </script>

Разве после "let event = new CustomEvent..." не должно быть rabbit.dispatchEvent(event)? - У вас имменно так и делается. event = new ... if ( !rabbit.dispatchEvent(event) ) {

Как этот листенер вообще работает? - Как и все листенеры. Если приходит событие на которое он подписан, то он передаёт его в обработчик eventHandler.

БЛОГ НА HUSL

Почему addEventListener для кастомного события вешается на id для которого нет dispatchEvent?

Ответы (1 шт):