• 实现一个自定义event事件,包括on ,off,trigger,once


    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);
                }
            }
  • 相关阅读:
    k8s之一键部署docker及k8s脚本(适用于centos7,cnetos8及ubuntu)
    k8s之使用Kubeadm部署k8s集群
    lnmp架构之一键搭建wordpress博客网站脚本(适用于centos7和centos8)
    一键编译安装nginx-1.18.0脚本(适用centos7,ubuntu1804,debian10)
    xshell登陆服务器步骤
    xshell无法连接到linux主机原因分析
    数据库文件备份与还原
    Linux服务器运维基本命令
    服务器运维操作命令
    firewalld的基本使用
  • 原文地址:https://www.cnblogs.com/yinping/p/10697152.html
Copyright © 2020-2023  润新知