Vant source code parsing event Detailed explanation of TS event processing global function addeventlistener

Source code

/* eslint-disable no-empty */
/* eslint-disable getter-return */
/* eslint-disable import/no-mutable-exports */
import { isServer } from '.';// Judge whether it is   Server side 

type EventHanlder = (event?: Event) => void;
/**
 * type  It's a joint type 
 *  The type name is  EventHanlder 
 *     Participation is  event  The type is  Event  Event type 
 *  Return value   There is no return value, so the type of return value is   void
 * */ 
export let supportsPassive = false;

if (!isServer) {
  try {
    const opts = {};
    Object.defineProperty(opts, 'passive', {
      get() {
        /* istanbul ignore next */
        supportsPassive = true;
      }
    });
    window.addEventListener('test-passive', null as any, opts);
    // as  To assert   Assertion refers to the determination that the data is of a certain type 
  } catch (e) {}
}
/**
 * try catch  Capture exception 
 * 
 * window.addEventListener  There are three parameters 
 *   Event type 
 *   Event bound functions 
 *    opts  perhaps  true,false
 *      opt 
 *        capture:boolean  If it is `true`, Express `listener` It will be propagated to the `EventTarget` Trigger when 
 *        once:boolean  Do you want to set single monitor 
 *        passive:boolean   Blocking default behavior   On or off 
 * 
 * 
 */



export function on(
  target: HTMLElement,// The goal is dom Elements 
  event: string,// Event type 
  handler: EventHanlder,// Event handler type 
  passive = false//
) {
  if (!isServer) {
    target.addEventListener(
      event,
      handler,
      supportsPassive ? { capture: false, passive } : false
    );
    /**
     *  Not on the server    
     *    target  It's incoming dom node 
     *    event  Event type 
     *    handler Is the execution method 
     *  supportsPassive  Do you support  passive
     *       Yes, it is  {capture,false,passive}
             No is false
    */
  }
}

export function off(target: HTMLElement, event: string, handler: EventHanlder) {
    /**
     * target  To whom , Target element 
     * event  Event type  Event
     * handler addEventListener  Bound events 
     * 
     * 
     * 
     */
  if (!isServer) {
    target.removeEventListener(event, handler);
    // off Express   Cancellation addEventListener Registered global events   removeAddEventListener
  }
}

export function stopPropagation(event: Event) {
  // stopProgapation()  Stop the event from bubbling 
  event.stopPropagation();
}

export function preventDefault(event: Event, isStopPropagation?: boolean) {
  /* istanbul ignore else */
  /**
   * event  Event parameters   Event 
   * isStopPropagation? ? Indicates that the parameter is optional and not mandatory   Event Bubbling 
    */
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    event.preventDefault();
    //  Blocking default behavior 
  }

  if (isStopPropagation) {
    //  Stop the event from bubbling 
    stopPropagation(event);
  }
}

addEventListener Details of event monitoring

addEventListener What is the role of

In the front-end world , Binding events generally use onClick perhaps @click Directly in dom Structurally bound Events ,

however One situation is if html Is dynamic , This is the time Directly in dom Structurally binding events becomes difficult to implement , So I need a dynamic to html Bound to events apI, namely addEventListener

addEventListener Parameters of

type Event type

Event handler

boolean perhaps Object       

      boolean true yes Event Bubbling , false It's event capture

       object There are three parameters

1. capture    Whether to start the capture phase Triggered when propagated to this element
2. once Do you want to set single monitor Trigger only once
3. passive Whether to block the default behavior

Remove event monitoring  removeEventListener

target.removeEeventListener(event,handler)

There are two parameters Event type   Event function