Event自定义事件

最新推荐文章于 2021-02-11 00:42:10 发布

湫风。

最新推荐文章于 2021-02-11 00:42:10 发布

阅读量547

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/a1354631841/article/details/90706974

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Event自定义事件

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