on监听事件,off取消事件 ,trigger触发事件,once只执行一次

class Event {
constructor() {
this.handlers = {};//记录所有的事件以及处理函数
/*
{
click:[fn1,fn2],
mouseover: [fn3,fn4]
}
*/
}
/**
* on 添加事件监听
* @param {事件类型} type
* @param {事件处理函数} handler
*/
on(type, handler, once = false) {
if (!this.handlers[type]) {
this.handlers[type] = [];
}
if (!this.handlers[type].includes(handler)) {
this.handlers[type].push(handler);
handler.once = once;
}
} /**
* off 取消事件监听
* @param {要取消的事件类型} type
* @param {要取消的事件函数,如果不传则清除所有} handler
*/
off(type, handler) {
if (this.handlers[type]) {
if (handler === undefined) {
this.handlers[type] = [];
} else {
this.handlers[type] = this.handlers[type].filter(f => f != handler);
}
}
} /**
* trigger 执行函数
* @param {要执行哪个类型的函数} type
* @param {事件对象} eventData
* @param {this执行} point
*/
trigger(type, eventData = {}, point = this) {
if (this.handlers[type]) {
this.handlers[type].forEach(f => {
f.call(point, eventData);
if (f.once) {
this.off(type, f);
}
});
}
} /**
* once 只执行一次
* @param {事件类型} type
* @param {要执行的函数} handler
*/
once(type, handler) {
this.on(type, handler, true);
}
}

测试脚本

let e = new Event;
e.on("click", () => {
console.log(1); })
e.on("click", () => {
console.log(2); })
function fn3() {
console.log(3); }
e.on("click", fn3);
console.log(e);

或者可以使用上一章节的内容进行测试https://www.cnblogs.com/yinping/p/10697083.html

在function函数添加监听函数

(function () {
let box = document.querySelector("#box");
let dragbox = new Drag(box);
dragbox.on("dragstart", function (e) { //这里不可以使用箭头函数,否则trigger的call方法无效
console.log(e, this); console.log("开始拖拽"); this.style.background = "yellow";
})
dragbox.on("dragend", function (e) {
console.log(e, this); this.style.background = "red";
})
dragbox.once("drag", function () {
console.log("drag");
})
})()

同时在move,start中添加触发函数

class Drag extends Event {
//构造函数
constructor(el) {
super();
this.el = el;
//鼠标摁下时的元素位置
this.startOffset = {};
//鼠标摁下时的鼠标位置
this.startPoint = {};
let move = (e) => {
this.move(e);
};
let end = (e) => {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", end);
this.trigger("dragend", e, this.el);
};
el.addEventListener("mousedown", (e) => {
this.start(e);
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", end);
})
}
//摁下时的处理函数
start(e) {
let { el } = this;
this.startOffset = {
x: el.offsetLeft,
y: el.offsetTop
}
this.startPoint = {
x: e.clientX,
y: e.clientY
}
this.trigger("dragstart", e, el); }
//鼠标移动时的处理函数
move(e) {
let { el, startOffset, startPoint } = this;
let newPoint = {
x: e.clientX,
y: e.clientY
}
let dis = {
x: newPoint.x - startPoint.x,
y: newPoint.y - startPoint.y,
}
el.style.left = dis.x + startOffset.x + "px";
el.style.top = dis.y + startOffset.y + "px";
this.trigger('drag', e, el);
}
}

实现一个自定义event事件,包括on ,off,trigger,once的更多相关文章

  1. CAD由一个自定义实体事件中的id得到自定义实体对象(com接口VB语言)

    由一个自定义实体事件中的id得到自定义实体对象.该函数只能在自定义实体事件中调用. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2 ...

  2. spring中自定义Event事件的使用和浅析

    在我目前接触的项目中,用到了许多spring相关的技术,框架层面的spring.spring mvc就不说了,细节上的功能也用了不少,如schedule定时任务.Filter过滤器. intercep ...

  3. Spring学习六:自定义Event事件

    Spring 中的自定义事件 编写和发布自己的自定义事件有许多步骤.按照在这一章给出的说明来编写,发布和处理自定义 Spring 事件. 步骤 描述 1 创建一个名称为 SpringExample 的 ...

  4. WPF路由事件三:自定义路由事件

    与依赖项属性类似,WPF也为路由事件提供了WPF事件系统这一组成.为一个类型添加一个路由事件的方式与为类型添加依赖项属性的方法类似,添加一个自定义路由事件的步骤: 一.声明路由事件变量并注册:定义只读 ...

  5. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  6. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  7. Event事件

    妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...

  8. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  9. WPF:自定义路由事件的实现

    路由事件通过EventManager,RegisterRoutedEvent方法注册,通过AddHandler和RemoveHandler来关联和解除关联的事件处理函数:通过RaiseEvent方法来 ...

随机推荐

  1. 180328_gVim设置tab为4个空格

    找到gVim安装目录 C:\Program Files (x86)\Vim\ 更改目录下的 _vimrc 文件,这是一个只读文件,需要管理员权限进行修改和保存. 在文件末尾添加下列内容: set ts ...

  2. spring <context:annotation-config/> 注解作用

    <context:component-scan>包含<context:annotation-config/>的作用 <context:annotation-config/ ...

  3. windows 删除删除不掉的文件

    DEL /F /A /Q \\?\%1RD /S /Q \\?\%1 windows下删除删除不掉的文件: 1.打开记事本,把上面的命令复制进去 2.保存,后缀名改为.bat,ok 3.把想要删除的文 ...

  4. CCSUOJ评测系统

    队名: BUGG 团队信息与分工: 开发: 周斌 B20150304221 舒 溢 B20150304209 测试: 许嘉荣 B20150304213 唐 浩 B20150304316 Product ...

  5. bootstrap作为mixin库的应用模式

    Bootstrap作为一个非常流行的前端css框架,得到了非常多的应用.一般的使用方法都是直接download bootstrap.css,作为css文件引入到html的markup中,随后直接引用其 ...

  6. Oracle EBS 启用关于此页

    FND:诊断英文为FND: Diagnostics,用于设置是否显示“关于此页”个性化自助定义英文为Personalize Self-Service Defn,用户设置在登录后,OAF页面是否显示“个 ...

  7. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  8. 《编程题》穷举法求N年后有多少头牛

    若一头小母牛,从出生起第四个年头开始每年生一头母牛,按这个规律,第N年时有多少头母牛? #include <iostream> int main(int argc, const char ...

  9. 阿里云CentOS 7服务器挂载数据盘

    本次使用的是centOS 7.4 64位操作系统 第一步:查看磁盘情况 我们发现,我总共有三个磁盘,分别为/dev/vda(100G)./dev/vdb(200G)./dev/vdc(100G),而被 ...

  10. ZT 人生真的是一场马拉松吗?

    中国合伙人:孟晓俊:生活应该是什么样的?自己提出的问题应该由自己来回答,别人的回答是别人的答案,是别人的生活,而你应该过自己的生活,不是别人的生活.     人生真的是一场马拉松吗? 投递人 itwr ...