创建一个事件处理的订阅发布类

  1. /*
  2.  * @Descripttion: 
  3.  * @version: 1.1.1
  4.  * @Author: 张三
  5.  * @Date: 2021-07-21 15:12:54
  6.  * @LastEditors: 李四
  7.  * @LastEditTime: 2021-07-21 15:58:56
  8.  */
  9. class Event{
  10.     constructor(){ }
  12.     //存放所有绑定的事件
  13.     handlers = {}  //处理器
  15.     //给事件添加方法，参数type：事件名  handler：事件处理函数
  16.     addEventListener(type,handler){
  17.         //判断是否存在该事件
  18.         if(!(type in this.handlers)){
  19.             this.handlers[type] = [];
  20.         }
  21.         //将事件处理函数添加到该事件处理函数列表内
  22.         this.handlers[type].push(handler);
  23.     }
  25.     //触发事件的方法 type:事件名 payload:参数
  26.     dispatchEvent(type,...payload){
  27.         if(!(type in this.handlers)){
  28.             return new Error('此事件不存在')
  29.         }
  31.         this.handlers[type].forEach(handler => handler(...payload));
  32.     }
  34.     //删除事件上的方法
  35.     removeEventListener(type,handler){
  36.         if(!(type in this.handlers)){
  37.             return new Error('此事件不存在');
  38.         }
  40.         if(!handler){
  41.             //不存在handler，默认删除此事件的全部事件处理函数，也就是删除这个事件
  42.             delete this.handlers[type];
  43.             return '事件绑定移除成功';
  44.         }
  46.         //找出该事件处理函数在事件函数列表的位置
  47.         let ind = this.handlers[type].findIndex(item => item === handler);
  48.         //判断是否存在该事件
  49.         if(!ind){
  50.             return new Error('不存在此事件处理函数');
  51.         }
  52.         //移除事件
  53.         this.handlers[type].splice(ind,1);
  54.         //判断事件处理函数列表是否不为空，为空删除该事件
  55.         if(!(this.handlers[type].length)){
  56.             delete this.handlers[type];
  57.             return '事件绑定移除成功';
  58.         }
  60.         return '事件处理函数移除成功';
  61.     }
  62. }

类的使用

  1. var event = new Event() // 创建event实例
  2. // 定义一个自定义事件:"load"
  3. function load (params) {
  4.   console.log('load', params)
  5. }
  6. event.addEventListener('load', load)
  7. // 再定义一个load事件
  8. function load2 (params) {
  9.   console.log('load2', params)
  10. }
  11. event.addEventListener('load', load2)
  12. // 触发该事件
  13. event.dispatchEvent('load', 'load事件触发')
  14. // 移除load2事件
  15. event.removeEventListener('load', load2)
  16. // 移除所有load事件
  17. event.removeEventListener('load')