28be5d3037
Classic Ember components (i.e. "@ember/component") rely upon "event
delegation" to listen for events at the application root and then dispatch
those events to any event handlers defined on individual Classic components.
This coordination is handled by Ember's EventDispatcher.
In contrast, Glimmer components (i.e. "@glimmer/component") expect event
listeners to be added to elements using modifiers (such as `{{on "click"}}`).
These event listeners are added directly to DOM elements using
`addEventListener`. There is no need for an event dispatcher.
Issues may arise when using Classic and Glimmer components together, since it
requires reconciling the two event handling approaches. For instance, event
propagation may not work as expected when a Classic component is nested
inside a Glimmer component.
`normalizeEmberEventHandling` helps an application standardize upon the
Glimmer event handling approach by eliminating usage of event delegation and
instead rewiring Classic components to directly use `addEventListener`.
Specifically, it performs the following:
- Invokes `eliminateClassicEventDelegation()` to remove all events associated
with Ember's EventDispatcher to reduce its runtime overhead and ensure that
it is effectively not in use.
- Invokes `rewireClassicComponentEvents(app)` to rewire each Classic
component to add its own event listeners for standard event handlers (e.g.
`click`, `mouseDown`, `submit`, etc.).
- Configures an instance initializer that invokes
`rewireActionModifier(appInstance)` to redefine the `action` modifier with
a substitute that uses `addEventListener`.
Additional changes include:
* d-button: only preventDefault / stopPropagation for handled actions
This allows unhandled events to propagate as expected.
* d-editor: avoid adding duplicate event listener for tests
This extra event listener causes duplicate paste events in tests.
* group-manage-email-settings: Monitor `input` instead of `change` event for checkboxes
|
||
|---|---|---|
| .. | ||
| notification-types | ||
| reviewable-types | ||
| allow-lister-test.js | ||
| bookmark-test.js | ||
| category-badge-test.js | ||
| click-track-test.js | ||
| computed-test.js | ||
| dom-from-string-test.js | ||
| download-calendar-test.js | ||
| ember-action-modifer-test.js | ||
| ember-events-test.js | ||
| emoji-test.js | ||
| formatter-test.js | ||
| get-url-test.js | ||
| highlight-search-test.js | ||
| highlight-syntax-test.js | ||
| i18n-test.js | ||
| icon-library-test.js | ||
| key-value-store-test.js | ||
| keyboard-shortcuts-test.js | ||
| link-lookup-test.js | ||
| link-mentions-test.js | ||
| load-script-test.js | ||
| oneboxer-test.js | ||
| parse-bbcode-tag-test.js | ||
| preload-store-test.js | ||
| pretty-text-test.js | ||
| sanitizer-test.js | ||
| search-test.js | ||
| sharing-test.js | ||
| suffix-trie-test.js | ||
| text-direction-test.js | ||
| text-test.js | ||
| time-shortcut-test.js | ||
| time-utils-test.js | ||
| to-markdown-test.js | ||
| upload-short-url-test.js | ||
| uploads-test.js | ||
| uppy-checksum-plugin-test.js | ||
| uppy-media-optimization-plugin-test.js | ||
| url-test.js | ||
| user-search-test.js | ||
| utilities-test.js | ||