//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控制执行一次 }}
