[Improvement] optimize passive events (#478)

packages/mixins/popup/index.js

@@ -1,6 +1,7 @@
 import manager from './manager';
 import context from './context';
 import scrollUtils from '../../utils/scroll';
+import { on, off } from '../../utils/event';
 
 export default {
   props: {
@@ -70,7 +71,11 @@ export default {
         status = '10';
       }
 
-      if (status !== '11' && isVertical && !(parseInt(status, 2) & parseInt(direction, 2))) {
+      if (
+        status !== '11' &&
+        isVertical &&
+        !(parseInt(status, 2) & parseInt(direction, 2))
+      ) {
         e.preventDefault();
         e.stopPropagation();
       }
@@ -106,8 +111,8 @@ export default {
       this.opened = true;
 
       if (this.preventScroll) {
-        document.addEventListener('touchstart', this.recordPosition);
+        on(document, 'touchstart', this.recordPosition);
-        document.addEventListener('touchmove', this.watchTouchMove);
+        on(document, 'touchmove', this.watchTouchMove);
       }
     },
 
@@ -129,8 +134,8 @@ export default {
       }
 
       if (this.preventScroll) {
-        document.removeEventListener('touchstart', this.recordPosition);
+        off(document, 'touchstart', this.recordPosition);
-        document.removeEventListener('touchmove', this.watchTouchMove);
+        off(document, 'touchmove', this.watchTouchMove);
       }
     }
   },

packages/tabs/index.vue

@@ -30,6 +30,7 @@
 <script>
 import { create } from '../utils';
 import { raf } from '../utils/raf';
+import { on, off } from '../utils/event';
 import scrollUtils from '../utils/scroll';
 
 export default create({
@@ -119,7 +120,7 @@ export default create({
     // whether to bind sticky listener
     scrollHandler(init) {
       this.scrollEl = this.scrollEl || scrollUtils.getScrollEventTarget(this.$el);
-      this.scrollEl[init ? 'addEventListener' : 'removeEventListener']('scroll', this.onScroll);
+      (init ? on : off)(this.scrollEl, 'scroll', this.onScroll, true);
       if (init) {
         this.onScroll();
       }

packages/utils/clickoutside.js

@@ -6,7 +6,7 @@
  * ```
  */
 
-import { isServer } from './index';
+import { on, off } from './event';
 
 const context = '@@clickoutsideContext';
 
@@ -24,7 +24,7 @@ export default {
       arg: binding.arg || 'click'
     };
 
-    !isServer && document.addEventListener(el[context].arg, handler);
+    on(document, el[context].arg, handler);
   },
 
   update(el, binding) {
@@ -32,7 +32,7 @@ export default {
   },
 
   unbind(el) {
-    !isServer && document.removeEventListener(el[context].arg, el[context].handler);
+    off(document, el[context].arg, el[context].handler);
   },
 
   install(Vue) {

packages/utils/event.js

@@ -0,0 +1,28 @@
+import { isServer } from './';
+
+export let supportsPassive = false;
+if (!isServer) {
+  try {
+    const opts = {};
+    Object.defineProperty(opts, 'passive', {
+      get() {
+        /* istanbul ignore next */
+        supportsPassive = true;
+      }
+    });
+    window.addEventListener('test-passive', null, opts);
+  } catch (e) {}
+}
+
+export function on(target, event, handler, passive = false) {
+  !isServer &&
+    target.addEventListener(
+      event,
+      handler,
+      supportsPassive ? { capture: false, passive } : false
+    );
+}
+
+export function off(target, event, handler) {
+  !isServer && target.removeEventListener(event, handler);
+}

packages/waterfall/directive.js

@@ -1,4 +1,5 @@
 import Utils from '../utils/scroll';
+import { on, off } from '../utils/event';
 
 const CONTEXT = '@@Waterfall';
 const OFFSET = 300;
@@ -14,8 +15,8 @@ function doBindEvent() {
   this.scrollEventListener = Utils.debounce(handleScrollEvent.bind(this), 200);
   this.scrollEventTarget = Utils.getScrollEventTarget(this.el);
 
-  var disabledExpr = this.el.getAttribute('waterfall-disabled');
+  const disabledExpr = this.el.getAttribute('waterfall-disabled');
-  var disabled = false;
+  let disabled = false;
   if (disabledExpr) {
     this.vm.$watch(disabledExpr, (value) => {
       this.disabled = value;
@@ -25,10 +26,10 @@ function doBindEvent() {
   }
   this.disabled = disabled;
 
-  var offset = this.el.getAttribute('waterfall-offset');
+  const offset = this.el.getAttribute('waterfall-offset');
   this.offset = Number(offset) || OFFSET;
 
-  this.scrollEventTarget.addEventListener('scroll', this.scrollEventListener);
+  on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
 
   this.scrollEventListener();
 }
@@ -119,7 +120,9 @@ export default function(type) {
 
     unbind(el) {
       const context = el[CONTEXT];
-      context.scrollEventTarget && context.scrollEventTarget.removeEventListener('scroll', context.scrollEventListener);
+      if (context.scrollEventTarget) {
+        off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
+      }
     }
   };
 };