当前位置:网站首页>Vant source code parsing event Detailed explanation of TS event processing global function addeventlistener
Vant source code parsing event Detailed explanation of TS event processing global function addeventlistener
2022-07-05 20:58:00 【The legend of Feng】
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
- capture Whether to start the capture phase Triggered when propagated to this element
- once Do you want to set single monitor Trigger only once
- passive Whether to block the default behavior
Remove event monitoring removeEventListener
target.removeEeventListener(event,handler)
There are two parameters Event type Event function
边栏推荐
- Abnova maxpab mouse derived polyclonal antibody solution
- php中explode函数存在的陷阱
- Write an interface based on flask
- Abnova fluorescent dye 620-m streptavidin scheme
- POJ 3414 pots (bfs+ clues)
- Analyze the knowledge transfer and sharing spirit of maker Education
- Prosci LAG-3 recombinant protein specification
- Talk about my fate with some programming languages
- 当用户登录,经常会有实时的下拉框,例如,输入邮箱,将会@qq.com,@163.com,@sohu.com
- 培养机器人教育创造力的前沿科技
猜你喜欢
Duchefa s0188 Chinese and English instructions of spectinomycin hydrochloride pentahydrate
产品好不好,谁说了算?Sonar提出分析的性能指标,帮助您轻松判断产品性能及表现
LeetCode_哈希表_困难_149. 直线上最多的点数
Return to blowing marshland -- travel notes of zhailidong, founder of duanzhitang
phpstudy小皮的mysql点击启动后迅速闪退,已解决
Norgen AAV extractant box instructions (including features)
当Steam教育进入个性化信息技术课程
haas506 2.0开发教程 - 阿里云ota - pac 固件升级(仅支持2.2以上版本)
Abnova maxpab mouse derived polyclonal antibody solution
台风来袭!建筑工地该如何防范台风!
随机推荐
ODPs next map / reduce preparation
MySQL ifnull usage function
php中explode函数存在的陷阱
Matplotlib drawing retouching (how to form high-quality drawings, such as how to set fonts, etc.)
示波器探头对信号源阻抗的影响
systemd-resolved 开启 debug 日志
如何让化工企业的ERP库存账目更准确
当Steam教育进入个性化信息技术课程
线程池的使用
Pytorch实战——MNIST数据集手写数字识别
Talk about my fate with some programming languages
Abnova丨E (DIII) (WNV) 重组蛋白 中英文说明书
XML建模
教你自己训练的pytorch模型转caffe(二)
基於flask寫一個接口
Monorepo管理方法论和依赖安全
中国管理科学研究院凝聚行业专家,傅强荣获智库专家“十佳青年”称号
LeetCode_哈希表_困难_149. 直线上最多的点数
基于AVFoundation实现视频录制的两种方式
MySQL fully parses json/ arrays