vant 源码解析 event.ts 事件处理 全局函数 addEventListener详解

源码

/* eslint-disable no-empty */
/* eslint-disable getter-return */
/* eslint-disable import/no-mutable-exports */
import { isServer } from '.';//判断是否是 服务端

type EventHanlder = (event?: Event) => void;
/**
 * type 是联合类型
 * 类型名称是 EventHanlder 
 *    入参是 event 类型是 Event 事件类型
 * 返回值 没有返回值所以返回值的类型是  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 表示断言 断言指断定数据为某个类型
  } catch (e) {}
}
/**
 * try catch 捕获异常
 * 
 * window.addEventListener 有三个参数
 *  事件类型
 *  事件绑定的函数
 *    opts 或者 true,false
 *      opt 
 *        capture:boolean 如果是`true`，表示`listener`会在该类型的事件捕获阶段传播到该`EventTarget`时触发
 *        once:boolean 是否设置单次监听
 *        passive:boolean  阻止默认行为 开启或者关闭
 * 
 * 
 */



export function on(
  target: HTMLElement,//目标dom元素
  event: string,//事件类型
  handler: EventHanlder,//事件处理函数类型
  passive = false//
) {
  if (!isServer) {
    target.addEventListener(
      event,
      handler,
      supportsPassive ? { capture: false, passive } : false
    );
    /**
     * 不是服务端时   
     *    target 是传入的dom节点
     *    event 事件类型
     *    handler是执行方法
     *  supportsPassive 是否支持 passive
     *      是就 {capture,false,passive}
            否就是false
    */
  }
}

export function off(target: HTMLElement, event: string, handler: EventHanlder) {
    /**
     * target 给谁注册，目标元素
     * event 事件类型 Event
     * handler addEventListener 绑定的事件
     * 
     * 
     * 
     */
  if (!isServer) {
    target.removeEventListener(event, handler);
    // off表示 注销addEventListener注册的全局事件  removeAddEventListener
  }
}

export function stopPropagation(event: Event) {
  // stopProgapation() 阻止事件冒泡
  event.stopPropagation();
}

export function preventDefault(event: Event, isStopPropagation?: boolean) {
  /* istanbul ignore else */
  /**
   * event 事件参数  Event 
   * isStopPropagation? ?表示参数是可选参数不是必填的 事件冒泡
    */
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    event.preventDefault();
    // 阻止默认行为
  }

  if (isStopPropagation) {
    // 阻止事件冒泡
    stopPropagation(event);
  }
}

addEventListener 事件监听详解

addEventListener的作用是什么

在前端的世界中，绑定事件一般用 onClick 或者 @click 直接在dom结构上绑定事件，

但是 有一种情况就是如果html是动态的，这个时候 直接在dom结构上绑定事件就变得难以实现了，所以我就需要一个动态给html绑定事件的apI,即addEventListener

addEventListener 的参数

type 事件类型

事件处理函数

boolean 或者 Object       

      boolean true是 事件冒泡， false 是事件捕获

       object 有三个参数

1. capture    是否开启捕获阶段 传播到该元素时触发
2. once 是否设置单次监听 只触发一次
3. passive 是否阻止默认行为

移除事件监听 removeEventListener

target.removeEeventListener(event,handler)

有两参数 事件类型  事件函数