dom_events.ts

/**
 * @license
 * Copyright Google Inc. All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {DOCUMENT, isPlatformServer} from '@angular/common';
import {Inject, Injectable, NgZone, Optional, PLATFORM_ID} from '@angular/core';

import {EventManagerPlugin} from './event_manager';

@Injectable()
export class DomEventsPlugin extends EventManagerPlugin {
  constructor(
      @Inject(DOCUMENT) doc: any, private ngZone: NgZone,
      @Optional() @Inject(PLATFORM_ID) platformId: {}|null) {
    super(doc);
  }

  // This plugin should come last in the list of plugins, because it accepts all
  // events.
  supports(eventName: string): boolean { return true; }

  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    /**
     * This code is about to add a listener to the DOM. If Zone.js is present, than
     * `addEventListener` has been patched. The patched code adds overhead in both
     * memory and speed (3x slower) than native. For this reason if we detect that
     * Zone.js is present we use a simple version of zone aware addEventListener instead.
     * The result is faster registration and the zone will be restored.
     * But ZoneSpec.onScheduleTask, ZoneSpec.onInvokeTask, ZoneSpec.onCancelTask
     * will not be invoked
     * We also do manual zone restoration in element.ts renderEventHandlerClosure method.
     *
     * NOTE: it is possible that the element is from different iframe, and so we
     * have to check before we execute the method.
     */
    let callback: EventListener = (function(evt: Event) {
      // check if Zone exists, if exists, check whether current Zone
      // holds the delayChangeDetection function reference.
      if (typeof Zone !== 'undefined') {
        const maybeDelayChangeDetection: () => void = Zone.current.get('maybeDelayChangeDetection');
        maybeDelayChangeDetection && maybeDelayChangeDetection();
      }
      return handler && handler.call(this, evt);
    }) as EventListener;
    element.addEventListener(eventName, callback);

    return () => this.removeEventListener(element, eventName, callback);
  }

  removeEventListener(target: any, eventName: string, callback: Function): void {
    target.removeEventListener(eventName, callback);
  }
}