Aurelia делегат против триггера: как узнать, когда использовать делегат или триггер?

Question

Я пытаюсь научиться работать со структурой Aurelia. При этом я читал здесь документацию, касающуюся их метода привязки событий. Документация предлагает использовать делегат по умолчанию. Я раздвоил планкр, который они предоставили в одном из своих постов в блоге, и добавил к нему немного. Полный удар здесь.

---

app.html

<template>
    <input value.bind="pageInput" blur.delegate="showAlert()" placeholder="delegate()" />
    <input value.bind="pageInput" blur.trigger="showAlert()" placeholder="trigger()" />

    <button type="button" click.delegate="showAlert()">delegate()</button>
    <button type="button" click.trigger="showAlert()">trigger()</button>
</template>

---

app.js

export class App {
  showAlert() {
    alert('showAlert()');
  }
}

---

Как вы можете видеть в plunkr, blur.trigger / click.delegate / click.trigger все запускают событие, а blur.delegate - нет.

Почему это так?

Как вы можете определить, когда .delegate не будет работать (без ручного тестирования, конечно)?

Answer 1

использование delegate кроме случаев, когда вы не можете использовать delegate,

Делегирование событий - это метод, используемый для повышения производительности приложений. Это значительно уменьшает количество подписок на события, используя "пузырящиеся" характеристики большинства событий DOM. При делегировании событий обработчики не привязываются к отдельным элементам. Вместо этого к узлу верхнего уровня, например элементу тела, присоединяется один обработчик событий. Когда событие всплывает до этого общего обработчика верхнего уровня, логика делегирования события вызывает соответствующий обработчик на основе цели события.

Чтобы узнать, можно ли использовать делегирование события для определенного события, Google mdn [event name] event, Фактически, перед любой веб-платформой, связанной с поиском Google, mdn часто возвращает высококачественный результат из Mozilla Developer Network. Когда вы окажетесь на странице MDN мероприятия, проверьте, является ли событие bubbles, Только события этого пузыря могут быть использованы с Аурелией delegate обязательная команда. blur , focus , load а также unload события не всплывают, поэтому вам нужно использовать trigger обязательная команда подписаться на эти события.

Вот страница MDN для размытия. Он имеет дополнительную информацию о методах делегирования событий для размытия и фокусировки событий.

Исключения из общего руководства выше:

использование trigger на кнопки, когда выполняются следующие условия:

1. Вам нужно отключить кнопку.
2. Содержимое кнопки состоит из других элементов (в отличие от просто текста).

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

использование trigger за click в определенных случаях использования iOS:

iOS не отображает события щелчка на элементах, кроме a, button, input а также select, Если вы подписываетесь на click на элемент без ввода, как div и нацелены на iOS, используйте trigger обязательная команда. Больше информации здесь и здесь.

Answer 2

В связи с этим делегат размытия будет работать, если Аурелия слушает событие в фазе захвата, но в Аурелии это невозможно. Было бы интересно, если бы кто-нибудь мог дать намек, как запечатлеть событие в Аурелии

В этом случае будет работать следующее:

<template>
    <input blur.delegate-capture='showAlert()' />
</template>