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

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

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 не будет работать (без ручного тестирования, конечно)?

Ответы

Ответ 1

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

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

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

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

Исключения из общих указаний выше:

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

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

Это гарантирует, что нажатие на кнопки с отключенными кнопками не перейдет в обработчик событий делегата. Подробнее здесь.

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

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

Ответ 2

Относительно этого, делегат размытия будет работать, если Аурелия прислушивается к событию в фазе захвата, но это не выполнимо в Aurelia. Wold быть интересным, если кто-то может дать некоторый намек на то, как захватить событие в Aurelia

В этом случае последует работа:

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