当前位置:网站首页>vant 源码解析 event.ts 事件处理 全局函数 addEventListener详解
vant 源码解析 event.ts 事件处理 全局函数 addEventListener详解
2022-07-05 20:58:00 【丰的传说】
源码
/* 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)
有两参数 事件类型 事件函数
边栏推荐
猜你喜欢
线程池的使用
ClickHouse 复制粘贴多行sql语句报错
ProSci LAG3抗体的化学性质和应用说明
Cutting edge technology for cultivating robot education creativity
Return to blowing marshland -- travel notes of zhailidong, founder of duanzhitang
实现浏览页面时校验用户是否已经完成登录的功能
2.<tag-哈希表, 字符串>补充: 剑指 Offer 50. 第一个只出现一次的字符 dbc
解读协作型机器人的日常应用功能
产品好不好,谁说了算?Sonar提出分析的性能指标,帮助您轻松判断产品性能及表现
MySQL InnoDB架构原理
随机推荐
Popular science | does poor English affect the NPDP exam?
Viewrootimpl and windowmanagerservice notes
Write an interface based on flask
Duchefa丨P1001植物琼脂中英文说明书
php中explode函数存在的陷阱
MYSQL IFNULL使用功能
2. < tag hash table, string> supplement: Sword finger offer 50 The first character DBC that appears only once
研學旅遊實踐教育的開展助力文旅產業發展
判断横竖屏的最佳实现
Maker education infiltrating the transformation of maker spirit and culture
Prosci LAG-3 recombinant protein specification
学习机器人无从下手?带你体会当下机器人热门研究方向有哪些
wpf 获取datagrid 中指定行列的DataGridTemplateColumn中的控件
当用户登录,经常会有实时的下拉框,例如,输入邮箱,将会@qq.com,@163.com,@sohu.com
Wanglaoji pharmaceutical's public welfare activity of "caring for the most lovely people under the scorching sun" was launched in Nanjing
POJ 3414 pots (bfs+ clues)
Analyze the knowledge transfer and sharing spirit of maker Education
获取前一天的js(时间戳转换)
Clear app data and get Icon
Monorepo management methodology and dependency security