当前位置： 首页 > 编程日记 > 正文

Event自定义事件

编程日记 2024-03-24 11:30:00 
//index.html文件<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;} </style>
</head>
<body><div id="box"></div>
</body>
</html>
<script src="./event.js"></script>
<script>class Drag extends Event{constructor(el){super();this.el = el;  //元素this.startPoint = {}; //起始鼠标位置this.startEl = {}; //起始元素位置let move = e => {this.move(e);}let end = (e) => {document.removeEventListener('mousemove',move);document.removeEventListener('mouseup',end);this.end(e); //触发事件
            }document.addEventListener('mousedown',e => {this.start(e);this.startPoint = {x : e.clientX,y : e.clientY}this.startEl = {x : this.el.offsetLeft,y : this.el.offsetTop}document.addEventListener('mousemove',move);document.addEventListener('mouseup',end)})}move(e){let nowPoint = {x : e.clientX,y : e.clientY}let dix = {x : nowPoint.x - this.startPoint.x,y : nowPoint.y - this.startPoint.y} this.el.style.left = this.startEl.x + dix.x + 'px';this.el.style.top = this.startEl.y + dix.y + 'px';}start(e){this.trigger('dragStart',e,this.el)}end(e){this.trigger('dragEnd',e,this.el)}}var box = document.getElementById('box');var drag = new Drag(box);drag.on('dragStart',function(e){this.style.background = 'yellow';})drag.on('dragEnd',function(e){this.style.background = 'red';})</script>//event.js文件

class Event{constructor(){this.handlers = {}//记录所有的事件和处理函数
    }/*** 添加事件监听*@param type : 事件类型@param hander : 处理函数*/on(type,hander,once = false){if(!this.handlers[type]){ //判断是否添加了事件函数this.handlers[type] = []}if(!this.handlers[type].includes(hander)){ //查看是否重复添加事件函数this.handlers[type].push(hander);hander.once = once; //给事件函数添加一个once属性
        }}/*** 取消事件监听* @param {*} type * @param {*} hander */off(type,hander){if(this.handlers[type]){if(hander === undefined){this.handlers[type] = [];}else{this.handlers[type] = this.handlers[type].filter(item => {return item != hander})}}}/*** 触发事件监听* @param {*} type * @param {*} e * @param {*} that */trigger(type,e,that){if(this.handlers[type]){this.handlers[type].forEach(f => {f.call(that,e);if(f.once){this.off(type,f); //根据once属性取消事件
                }})} }/*** 执行一次* @param {*} type * @param {*} hander */once(type,hander){this.on(type,hander,true); //true控制执行一次
    }
}

转载于:https://www.cnblogs.com/ninefrom/p/10875860.html


https://www.dkcj.cn/info/3631.html

相关文章：

byte endian（biglittle endian）

1. 大小端的区别 little endian:把低位字节存放在内存的低位; // big endian: 将低位字节存放在内存的高位; 比如&#xff1a;0x1234,则12 就属于高位字节&#xff1b;34 属于低位字节 假如从地址0x0000 0000开始的一个字节中保存数据0x12345678, 这2中字节序在内存当中存…

编程日记2024/03/24 11:00:00

鸡啄米vc++2010系列32（标签控件Tab Control 下）

上一节中鸡啄米讲了标签控件知识的上半部分&#xff0c;本节继续讲下半部分。 标签控件的创建 MFC为标签控件的操作提供了CTabCtrl类。 与之前的控件类似&#xff0c;创建标签控件可以在对话框模板中直接拖入Tab Control&#xff0c;也可以使用CTabCtrl类的Create成员函数创建。…

编程日记2024/03/24 10:30:00

Java项目:网上图书商城系统(java+SSM+Jsp+MySQL+Redis+JWT+Shiro+RabbitMQ+EasyUI)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 这个项目涉及到Shiro整合JWT、秒杀功能所具备的基本要求(限流、乐观锁、接口隐藏、JMeter高并发测试等等)、消息中间件RabbitMQ的异步邮件通知和死信队列、沙箱支付宝模拟支付等等技术亮点。 项目功能&#…

编程日记2024/03/24 10:00:00

虚拟机使用镜像文件安装系统

场景说明&#xff1a;指定Linux镜像之后&#xff0c;点击电源开始安装&#xff0c;安装完成之后&#xff0c;卸载ISO&#xff0c;进入BIOS&#xff0c;设置从硬盘启动。vmvare有提供快速安装的方式。当前的安装类似于手动安装&#xff0c;模拟真实的环境操作步骤&#xff1a;1&…

编程日记2024/03/24 09:30:00

cmd命令简单别木马的蛛丝马迹

一些基本的Windows命令往往可以识别木马的蛛丝马迹&#xff0c;而且在保护网络安全上起到很大的作用。 检测网络连接 如果你怀疑自己的计算机上被别人安装了木马&#xff0c;或者是中了病毒&#xff0c;但是手里没有完善的工具来检测是不是真有这样的事情发生&#xff0c;那可以…

编程日记2024/03/24 09:00:00

ubuntu常用翻译工具stardict

日常办公应用中&#xff0c;我们经常会碰到一些陌生的外文单词或文章需要翻译&#xff0c;在Windows平台上&#xff0c;可通过很多翻译工具来帮忙解决。当我们转到Ubuntu系统 中办公时&#xff0c;肯定也希望能有一款简单易用、功能强大的翻译工具。 　　这里给大家推荐Linux平…

编程日记2024/03/24 08:30:00

Java项目:教务管理系统(java+JSP+Spring+SpringBoot+layui+maven)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能包括&#xff1a; 三角色教师 管理员&#xff0c;学生教务管理系统&#xff0c;包括院系管理&#xff0c;课题综合管理&#xff0c;信息管理&#xff0c;以及差旅管理&#xff0c;学生选题…

编程日记2024/03/24 08:00:00

jsp 环境配置记录

1. jdk&#xff0c;下载地址1 环境变量配置&#xff1a; 1&#xff09;新建 JAVA_HOME 变量 。 变量值填写jdk的安装目录&#xff08;本人是 C:\Java\jdk1.7.0) 2) 系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; &#xff08;注意原…

编程日记2024/03/24 07:30:00

一些关于找工作的书籍

技术类 算法导论&#xff1a;不要纠缠太难的部分&#xff08;红黑树、斐波那契额堆、NP、近似算法&#xff09;&#xff1b; 编程之美&#xff1a;仔细阅读&#xff0c;包括上面的智力题&#xff0c;纸上手写代码&#xff1b; 编程珠玑&#xff1a;建议仔细阅读&#xff0c;尤其…

编程日记2024/03/24 07:00:00

最快地复制一张表

1.mysqldump方法 一种方法是&#xff0c;使用mysqldump命令将数据导出成一组INSERT语句。你可以使用下面的命令&#xff1a; mysqldump -h$host -P$port -u$user --add-locks --no-create-info --single-transaction --set-gtid-purgedOFF db1 t --where"a>900" …

编程日记2024/03/24 06:30:00

Linux下C++开发工具介绍

概述 就C&#xff0b;&#xff0b;开发工具而言&#xff0c;与Windows下微软&#xff08;VC&#xff0c; VS2005等&#xff09;一统天下相比&#xff0c;Linux/Unix下C&#xff0b;&#xff0b;开发&#xff0c;可谓五花八门&#xff0c;各式各样。Emacs, vi, eclipse, anj…

编程日记2024/03/24 06:00:00

Linked List Cycle II

Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Follow up:Can you solve it without using extra space? 分析&#xff1a;和Linked List Cycle类似&#xff0c;还是用map。 用时&#xff1a;60ms 1 /**2 * Definition …

编程日记2024/03/24 05:30:00

Java项目:考试管理系统(java+Springboot+Maven+Jpa+Vue+Mysql)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述本系统功能包括&#xff1a; 支持单选题、多选题、判断题支持学生(student)、教师(teacher)、管理员(admin)三种角色学生&#xff1a;参加考试和查看我的考试教师&#xff1a;学生的所有权限创建…

编程日记2024/03/24 05:00:00

[物理学与PDEs]第1章第7节 媒质中的 Maxwell 方程组 7.2 媒质交界面上的条件

通过 Maxwell 方程组的积分形式易在交界面上各量应满足交界面条件: $$\beex \bea \sez{{\bf D}}\cdot{\bf n}\omega_f,&\sex{\omega_f:\ \mbox{交界面上自由电荷密度}};\\ \sez{{\bf B}}\cdot{\bf n}0,&\sex{\ra\mbox{ 磁感应强度法向分量在交界面上连续}};\\ \sez{{\b…

编程日记2024/03/24 04:30:00

第十二周编程总结

这个作业属于的课程C语言程序设计2这个作业要求在哪里https://edu.cnblogs.com/campus/zswxy/MS/homework/3239我在这个课程的目标是使用编程实现简单的游戏设计这个作业在哪个具体方面帮助我实现目标使用指针解决问题&#xff0c;熟悉指针与函数之间的关系和指针作为函数返回值…

编程日记2024/03/24 04:00:00

什么是交叉编译

在一种计算机环境中运行的编译程序&#xff0c;能编译出在另外一种环境下运行的代码&#xff0c;我们就称这种编译器支持交叉编译。这个编译过程就叫交叉编译。简单地说&#xff0c;就是在一个平台上生成另一个平台上的可执行代码。这里需要注意的是所谓平台&#xff0c;实际上…

编程日记2024/03/24 03:30:00

树形结构在关系数据库中的设计

在程序设计中&#xff0c;经常以树形结构表示数据的层次关系&#xff0c;如菜单的结构、商品的分类等。 这样的层次结构在关系数据库中难以直观地表示。常见的一种做法是用一个字段指向上级节点来表示记录的上下级关系。 fidpidfname 1 Food 2 1 Fruit 3 2 Red 4 3…

编程日记2024/03/24 03:00:00

Java项目:在线课程会员系统(java+Springboot+Maven+JSP+Spring+Mysql+layui)

一、项目简述 功能包括&#xff1a; 用户管理&#xff0c;课程管理&#xff0c;在线视频观看&#xff0c;评论&#xff0c;会员展示&#xff0c;会员充值等等。 二、项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 mysql Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEc…

编程日记2024/03/24 02:30:00

职场观察：高薪需要什么？

标签&#xff1a;职场高薪原创作品&#xff0c;允许转载&#xff0c;转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://xjsunjie.blog.51cto.com/999372/1378547新的一年&#xff0c;看到别人跳槽或涨薪&#xff0c;你是否也蠢蠢欲动…

编程日记2024/03/24 02:00:00

Excel-姓名列中同一个人汇总金额列，得出总金额

8、姓名列中同一个人求和金额列&#xff0c;得出总金额。 方法一&#xff1a; P2处公式SUMPRODUCT(($M$2:$M$20$M2)*($N$2:$N$20)) 解释函数&#xff1a; 引用&#xff1a;https://zhinan.sogou.com/guide/detail/?id1610011625 PS&#xff1a;这个只是单条件求和&#xff0c;…

编程日记2024/03/24 01:30:00

C语言编译全过程（转贴）

C语言编译全过程 编译的概念&#xff1a;编译程序读取源程序&#xff08;字符流&#xff09;&#xff0c;对之进行词法和语法的分析&#xff0c;将高级语言指令转换为功能等效的汇编代码&#xff0c;再由汇编程序转换为机器语言&#xff0c;并且按照操作系统对可执行文件…

编程日记2024/03/24 01:00:00

Java项目:家教管理系统(java+SSM+MyBatis+MySQL+Maven+Jsp)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 该系统分为前台和后台 前台功能有&#xff1a;登录、注册、查看学员、查看教师、个人中心等。 后台功能有&#xff1a;用户管理、学员管理、教师管理、审核管理、公告管理、新闻管理、简历管理等。前台注册…

编程日记2024/03/24 00:30:00

ecshop /api/client/api.php、/api/client/includes/lib_api.php SQL Injection Vul

catalog 1. 漏洞描述 2. 漏洞触发条件 3. 漏洞影响范围 4. 漏洞代码分析 5. 防御方法 6. 攻防思考 1. 漏洞描述 ECShop存在一个盲注漏洞&#xff0c;问题存在于/api/client/api.php文件中&#xff0c;提交特制的恶意POST请求可进行SQL注入攻击&#xff0c;可获得敏感信息或操作…

编程日记2024/03/24 00:00:00

C++ 检测内存泄露

本文描述了如何检测内存泄露。最主要的是纯C&#xff0c;C的程序如何检测内存泄露。 现在有很多专业的检测工具&#xff0c;比如比较有名的BoundsCheck, 但是这类工具也有他的缺点&#xff0c;我认为首先BoundsCheck是商业软件&#xff0c;呵呵。然后呢需要安装&#xff0c;使用…

编程日记2024/03/23 23:30:00

Java 学习笔记(4)——java 常见类

上次提前说了java中的面向对象&#xff0c;主要是为了使用这些常见类做打算&#xff0c;毕竟Java中一切都是对象&#xff0c;要使用一些系统提供的功能必须得通过类对象调用方法。其实Java相比于C来说强大的另一个原因是Java中提供了大量可用的标准库 字符串 字符串可以说是任何…

编程日记2024/03/23 23:00:00

浅谈GCC预编译头技术

浅谈GCC预编译头技术 文/jorge ——谨以此文&#xff0c;悼念我等待MinGW编译时逝去的那些时间。 其 实刚开始编程的时候&#xff0c;我是丝毫不重视编译速度之类的问题的&#xff0c;原因很简单&#xff0c;因为那时我用BASICA。后来一直用到C Builder&#xff0c;尽管Borl…

编程日记2024/03/23 22:30:00

Java项目:慢病报销管理信息系统(java+MySQL+Jdbc+Servlet+Jsp)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能&#xff1a; 慢病管理&#xff0c;医疗机构管理&#xff0c;家庭管理&#xff0c;费用交纳&#xff0c;费用报销&#xff0c;报表统计等等功能。 二、项目运行 环境配置&#xff1a; Jd…

编程日记2024/03/23 22:00:00

Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin. 这是Ajax跨域访问权限的问题&#xff0c;服务器端不接受来自另一个不同IP地址的由脚本文件发出的…

编程日记2024/03/23 21:30:00

php 遍历所有的文件

<?php prin_r(glob($path)); 2 转载于:https://www.cnblogs.com/zqk8553/p/3640071.html

编程日记2024/03/23 21:00:00

Oracle数据库物理存储结构管理

1、实验目的 &#xff08;1&#xff09;掌握Oracle数据库数据文件的管理。 &#xff08;2&#xff09;掌握Oracle数据库控制文件的管理。 &#xff08;3&#xff09;掌握Oracle数据库重做日志文件的管理。 &#xff08;4&#xff09;掌握Oracle数据库归档管理。 2、实验环境 Wi…

编程日记2024/03/23 20:30:00