explicit capture option in addEventListener (atom#21562)

Based on the docs true is equal to {capture: true}

> In older versions of the DOM specification, the third parameter of addEventListener() was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners

Author: aminya

src/atom-environment.js

@@ -340,12 +340,16 @@ class AtomEnvironment {
         if (!this.unloading) this.saveState({ isUnloading: false });
       });
     }, this.saveStateDebounceInterval);
-    this.document.addEventListener('mousedown', saveState, true);
-    this.document.addEventListener('keydown', saveState, true);
+    this.document.addEventListener('mousedown', saveState, { capture: true });
+    this.document.addEventListener('keydown', saveState, { capture: true });
     this.disposables.add(
       new Disposable(() => {
-        this.document.removeEventListener('mousedown', saveState, true);
-        this.document.removeEventListener('keydown', saveState, true);
+        this.document.removeEventListener('mousedown', saveState, {
+          capture: true
+        });
+        this.document.removeEventListener('keydown', saveState, {
+          capture: true
+        });
       })
     );
   }

src/command-registry.js

@@ -421,11 +421,9 @@ module.exports = class CommandRegistry {
 
   commandRegistered(commandName) {
     if (this.rootNode != null && !this.registeredCommands[commandName]) {
-      this.rootNode.addEventListener(
-        commandName,
-        this.handleCommandEvent,
-        true
-      );
+      this.rootNode.addEventListener(commandName, this.handleCommandEvent, {
+        capture: true
+      });
       return (this.registeredCommands[commandName] = true);
     }
   }

src/initialize-benchmark-window.js

@@ -63,7 +63,7 @@ module.exports = async function() {
           ipcHelpers.call('window-method', 'copy');
         }
       },
-      true
+      { capture: true }
     );
 
     const clipboard = new Clipboard();

src/initialize-test-window.coffee

@@ -62,8 +62,8 @@ module.exports = ({blobStore}) ->
       # Copy: cmd-c / ctrl-c
       if (event.metaKey or event.ctrlKey) and event.keyCode is 67
         atom.clipboard.write(window.getSelection().toString())
-        
-    window.addEventListener('keydown', handleKeydown, true)
+
+    window.addEventListener('keydown', handleKeydown, {capture: true})
 
     # Add 'exports' to module search path.
     exportsPath = path.join(getWindowLoadSettings().resourcePath, 'exports')

src/pane-element.js

@@ -65,8 +65,8 @@ class PaneElement extends HTMLElement {
         this.applicationDelegate.open({ pathsToOpen, here: true });
       }
     };
-    this.addEventListener('focus', handleFocus, true);
-    this.addEventListener('blur', handleBlur, true);
+    this.addEventListener('focus', handleFocus, { capture: true });
+    this.addEventListener('blur', handleBlur, { capture: true });
     this.addEventListener('dragover', handleDragOver);
     this.addEventListener('drop', handleDrop);
   }

src/tooltip.js

@@ -259,7 +259,9 @@ Tooltip.prototype.leave = function(event) {
 Tooltip.prototype.show = function() {
   if (this.hasContent() && this.enabled) {
     if (this.hideOnClickOutsideOfTooltip) {
-      window.addEventListener('click', this.hideOnClickOutsideOfTooltip, true);
+      window.addEventListener('click', this.hideOnClickOutsideOfTooltip, {
+        capture: true
+      });
     }
 
     if (this.hideOnKeydownOutsideOfTooltip) {

src/workspace-element.js

@@ -158,7 +158,9 @@ class WorkspaceElement extends HTMLElement {
     this.verticalAxis.appendChild(this.paneContainer);
     this.addEventListener('focus', this.handleFocus.bind(this));
 
-    this.addEventListener('mousewheel', this.handleMousewheel.bind(this), true);
+    this.addEventListener('mousewheel', this.handleMousewheel.bind(this), {
+      capture: true
+    });
     window.addEventListener('dragstart', this.handleDragStart);
     window.addEventListener('mousemove', this.handleEdgesMouseMove);
 
@@ -208,8 +210,8 @@ class WorkspaceElement extends HTMLElement {
     const { item } = event.target;
     if (!item) return;
     this.model.setDraggingItem(item);
-    window.addEventListener('dragend', this.handleDragEnd, true);
-    window.addEventListener('drop', this.handleDrop, true);
+    window.addEventListener('dragend', this.handleDragEnd, { capture: true });
+    window.addEventListener('drop', this.handleDrop, { capture: true });
   }
 
   handleDragEnd(event) {