js实现事件发射监听（观察－订阅模式）

最新推荐文章于 2025-10-11 11:33:39 发布

原创最新推荐文章于 2025-10-11 11:33:39 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #事件发射监听实现 #设计模式－观察订阅模式

JavaScript基础入门专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个简单的事件监听器与事件发射器的实现方式。通过定义eventEmitter和eventListener两个对象，实现了事件的注册、触发及移除功能。具体包括如何添加事件监听回调、触发已注册的事件以及移除不再需要的监听器。

  var eventEmitter = {
    emit: function (eventName) {
      var callbackArr = events[eventName]
      if ( callbackArr && callbackArr.length) {
        for (var i = 0; i < callbackArr.length; i++) {
          callbackArr[i]()
        }
      }
    }
  };
  var events = {};
  var eventListener = {
    on: function (eventName, callback) {
      if (!events[eventName]) {
        events[eventName] = []
      }
      events[eventName].push(callback)
    },
    remove: function (eventName, callback) {
      var callbackArr = events[eventName] 
      if (callbackArr && callbackArr.length) {
        var index = callbackArr.indexOf(callback);
        callbackArr.splice(index, 1);
      }
    }
  };
 
  var clickCallback = function () {
    console.log('click callback'); 
  }
  eventListener.on('click', clickCallback)
  eventListener.on('click', function () {
    console.log('other click callback')
  })
  eventEmitter.emit('click');
  eventListener.remove('click', clickCallback)
  eventEmitter.emit('click');