源码
/* 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 有三个参数
- capture 是否开启捕获阶段 传播到该元素时触发
- once 是否设置单次监听 只触发一次
- passive 是否阻止默认行为
移除事件监听 removeEventListener
target.removeEeventListener(event,handler)
有两参数 事件类型 事件函数