Merge pull request #185 from github/document-abortcontroller-with-addeventlistener

document Abortcontroller with addEventListener

Author: keithamus

docs/_guide/patterns.md

@@ -93,3 +93,37 @@ class RemoveSearchElement extends HTMLElement {
   }
 }
 ```
+
+### Registering global or many event listeners
+
+Generally speaking, you'll want to use ["Actions"]({{ site.baseurl }}/guide/actions) to register event listeners with your Controller, but Actions only work for components nested within your Controller. It may also be necessary to listen for events on the Document, Window, or across well-known adjacent elements. We can manually call `addEventListener` for these types, including during the `connectedCallback` phase. Cleanup for `addEventListener` can be a bit error prone, but [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) can be useful here to pass a signal that the element is cleaning up:
+
+
+```typescript
+@controller
+class UnsavedChangesElement extends HTMLElement {
+
+  #eventAbortController: AbortController|null
+
+  connectedCallback(event: Event) {
+    // Create the new AbortController and get the new signal
+    const {signal} = (this.#eventAbortController = new AbortController())
+    
+    // You can `signal` as an option to any `addEventListener` call:
+    window.addEventListener('hashchange', this, { signal })
+    window.addEventListener('blur', this, { signal })
+    window.addEventListener('popstate', this, { signal })
+    window.addEventListener('pagehide', this, { signal })
+  }
+  
+  disconnectedCallback() {
+    // This will clean up any `addEventListener` calls which were given the `signal`
+    this.#eventAbortController?.abort()
+  }
+  
+  handleEvent(event) {
+    // `handleEvent` will be called when each one of the event listeners
+    // defined in `connectedCallback` is dispatched.
+  }
+}
+```