• 实现一个自定义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);
                }
            }
  • 相关阅读:
    django中ckeditor富文本编辑器使用
    xadmin安装
    RabbitMQ应用示例
    windows下安装RabbitMQ
    第四章 面向对象
    第三章 模块
    git简单使用
    python中的装饰器
    Python 使用 argparse 开发命令行工具/获取命令行参数/子命令实现
    自动化运维工具 Ansible 安装、配置及使用
  • 原文地址:https://www.cnblogs.com/yinping/p/10697152.html
Copyright © 2020-2023  润新知