perf(events): use passive event listeners where possible (#2435)

bootstrap-vue · Jan 11, 2019 · a01dee4 · a01dee4
1 parent 9463138
commit a01dee4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/components/collapse/collapse.js b/src/components/collapse/collapse.js
@@ -7,6 +7,9 @@ const EVENT_ACCORDION = 'bv::collapse::accordion'
 // Events we listen to on $root
 const EVENT_TOGGLE = 'bv::toggle::collapse'
 
+// Event Listener options
+const EventOptions = { passive: true, capture: false }
+
 // @vue/component
 export default {
   name: 'BCollapse',
@@ -73,19 +76,19 @@ export default {
   mounted () {
     if (this.isNav && typeof document !== 'undefined') {
       // Set up handlers
-      eventOn(window, 'resize', this.handleResize, false)
-      eventOn(window, 'orientationchange', this.handleResize, false)
+      eventOn(window, 'resize', this.handleResize, EventOptions)
+      eventOn(window, 'orientationchange', this.handleResize, EventOptions)
       this.handleResize()
     }
     this.emitState()
   },
   updated () {
     this.$root.$emit(EVENT_STATE, this.id, this.show)
   },
-  beforeDestroy () {
+  beforeDestroy () /* istanbul ignore next */ {
     if (this.isNav && typeof document !== 'undefined') {
-      eventOff(window, 'resize', this.handleResize, false)
-      eventOff(window, 'orientationchange', this.handleResize, false)
+      eventOff(window, 'resize', this.handleResize, EventOptions)
+      eventOff(window, 'orientationchange', this.handleResize, EventOptions)
     }
   },
   methods: {

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -585,21 +585,25 @@ export default {
     },
     // Turn on/off focusin listener
     setEnforceFocus (on) {
+      const options = { passive: true, capture: false }
       if (on) {
-        eventOn(document, 'focusin', this.focusHandler, false)
+        eventOn(document, 'focusin', this.focusHandler, options)
       } else {
-        eventOff(document, 'focusin', this.focusHandler, false)
+        eventOff(document, 'focusin', this.focusHandler, options)
       }
     },
     // Resize Listener
-    setResizeEvent (on) {
-      ['resize', 'orientationchange'].forEach(evtName => {
-        if (on) {
-          eventOn(window, evtName, this.adjustDialog)
-        } else {
-          eventOff(window, evtName, this.adjustDialog)
+    setResizeEvent (on) /* istanbul ignore next: can't easily test in JSDOM */ {
+      ['resize', 'orientationchange'].forEach(
+        evtName => {
+          const options = { passive: true, capture: false }
+          if (on) {
+            eventOn(window, evtName, this.adjustDialog, options)
+          } else {
+            eventOff(window, evtName, this.adjustDialog, options)
+          }
         }
-      })
+      )
     },
     // Root Listener handlers
     showHandler (id, triggerEl) {