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