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

源码

import { isServer } from '.';//判断是否是 服务端

type EventHanlder = (event?: Event) => void;
 
export let supportsPassive = false;

if (!isServer) {
  try {
    const opts = {};
    Object.defineProperty(opts, 'passive', {
      get() {
        
        supportsPassive = true;
      }
    });
    window.addEventListener('test-passive', null as any, opts);
    // as 表示断言 断言指断定数据为某个类型
  } catch (e) {}
}




export function on(
  target: HTMLElement,//目标dom元素
  event: string,//事件类型
  handler: EventHanlder,//事件处理函数类型
  passive = false//
) {
  if (!isServer) {
    target.addEventListener(
      event,
      handler,
      supportsPassive ? { capture: false, passive } : false
    );
    
  }
}

export function off(target: HTMLElement, event: string, handler: EventHanlder) {
    
  if (!isServer) {
    target.removeEventListener(event, handler);
    // off表示 注销addEventListener注册的全局事件  removeAddEventListener
  }
}

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

export function preventDefault(event: Event, isStopPropagation?: boolean) {
  
  
  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)

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