zoukankan      html  css  js  c++  java
  • Javascript中自定义事件

    class CustomEvent {
      constructor() {
        // {
        //   eventName: [];
        // }
        this.eventsKeeper = {};
      }
    
      isAssigned(name, cb) {
        const keeper = this.eventsKeeper;
        if (!cb) {
          return name in keeper;
        } else {
          return name in keeper && keeper[name].indexOf(cb) !== -1;
        }
      }
    
      on(name, cb) {
        const keeper = this.eventsKeeper;
        const cbs = keeper[name];
        if (this.isAssigned(name, cb)) return;
        if (!cbs) {
          keeper[name] = [cb];
        } else {
          keeper[name].push(cb);
        }
      }
    
      emit(name, ...rest) {
        if (this.isAssigned(name)) {
          this.eventsKeeper[name].forEach(cb => {
            cb(...rest);
          });
        } else {
          throw Error(`you may not listen [${name}] event!`);
        }
      }
    
      remove(name) {
        if (!name) return;
        delete this.eventsKeeper[name];
      }
    }
    
    
    // test
    // node test.js
    
    // const event = new CustomEvent();
    
    // event.on("test", (first, second) => {
    //   console.log(`${first} ${second}`);
    //   console.log("it is ok");
    // });
    
    // event.on("test", () => {
    //   console.log("it is line ok");
    // });
    
    // event.remove("test");
    
    // event.on("line", () => {
    //   console.log("it is line ok ");
    // });
    
    // event.emit("line");
    
    // setTimeout(() => {
    //   event.emit("test", "hello", "world");
    // }, 2000);
    
  • 相关阅读:
    css的选择器
    javaScript 的变量使用
    关于外键约束
    javaScript中运算符
    css介绍和三种引入方式
    关于盒子模型
    类和类的六种关系
    DQL和DML更多操作
    javaScript的特点
    关于 让页面中的按钮 响应回车
  • 原文地址:https://www.cnblogs.com/looyulong/p/10977249.html
Copyright © 2011-2022 走看看