Aurelia delegate vs trigger: how do you know when to use delegate or trigger?

by

Use delegate except when you cannot use delegate.

Event delegation is a technique used to improve application performance. It drastically reduces the number of event subscriptions by leveraging the “bubbling” characteristic of most DOM events. With event delegation, handlers are not attached to individual elements. Instead, a single event handler is attached to a top-level node such as the body element. When an event bubbles up to this shared top-level handler the event delegation logic calls the appropriate handler based on the event’s target.

To find out if event delegation can be used with a particular event, google mdn [event name] event. In fact, preceding any web platform related google search with mdn often returns a high quality result from the Mozilla Developer Network. Once you’re on the event’s MDN page, check whether the event bubbles. Only events that bubble can be used with Aurelia’s delegate binding command. The blur, focus, load and unload events do not bubble so you’ll need to use the trigger binding command to subscribe to these events.

Here’s the MDN page for blur. It has further info on event delegation techniques for the blur and focus events.

Exceptions to the general guidance above:

Use trigger on buttons when the following conditions are met:

  1. You need to disable the button.
  2. The button’s content is made up of other elements (as opposed to just text).

This will ensure clicks on disabled button’s children won’t bubble up to the delegate event handler. More info here.

Use trigger for click in certain iOS use-cases:

iOS does not bubble click events on elements other than a, button, input and select. If you’re subscribing to click on a non-input element like a div and are targeting iOS, use the trigger binding command.
More info here and here.

More Related Contents:

  1. Property change subscription with Aurelia
  2. How can I add Font Awesome to my Aurelia project using npm?
  3. How can I access field 1 value from this dictionary by using java script?
  4. Write tags in HTML and print
  5. What is the difference between object keys with quotes and without quotes?
  6. How to remove text from a string?
  7. Is onload equal to readyState==4 in XMLHttpRequest?
  8. How to remove element from array in forEach loop?
  9. Export table from database to csv file
  10. how to convert this nested object into a flat object?
  11. JSON.stringify without quotes on properties?
  12. Replace only text inside a div using jquery
  13. Prevent JavaScript Number function from rounding big numbers
  14. When iterating over values, why does typeof(value) return “string” when value is a number? JavaScript
  15. “.addEventListener is not a function” why does this error occur?
  16. How to convert text to binary code in JavaScript?
  17. Why does document.body.offsetHeight + document.body.bottomMargin not equal document.documentElement.offsetHeight
  18. How to trim() white spaces from a string?
  19. call function on change of value inside tag
  20. How to make non-blocking javascript code?
  21. .map() a Javascript ES6 Map?
  22. Angular2 – Expression has changed after it was checked – Binding to div width with resize events
  23. HTML5 and Javascript to play videos only when visible
  24. Would onClick event work on touch on touch-screen devices?
  25. How to disable repetitive keydown in jQuery [duplicate]
  26. Accessing a JSON property (String) using a variable
  27. How to get the text of the selected option of a select using jquery?
  28. Does jQuery .remove() clear out loaded javascript when it is used to remove a script tag?
  29. Focus style for TextInput in react-native
  30. doPostback failing in IE 11+ Windows 8.1

Leave a Comment