详解 JavaScript 中的自定义事件编写

现代浏览器原生实现

在现代环境中，可以使用 Event 和 CustomEvent 构造函数配合 addEventListener 与 dispatchEvent API 来实现自定义事件。这种方式结构清晰，能够传递数据并控制冒泡行为。

第1步：监听自定义事件

首先需要在目标元素上建立监听器，以接收触发的自定义消息。

1. 目的： 绑定回调函数，准备接收特定类型的事件。
2. 操作： 使用 addEventListener 方法，指定自定义事件名称和回调函数。

var event = new Event('build');
elem.addEventListener('build', function (e) { 
  console.log('收到构建事件'); 
}, false);

第2步：创建并附加数据的自定义事件

若需在事件发生时传递上下文数据（如配置项或状态值），应使用 CustomEvent。

1. 目的： 构造携带细节数据的数据包。
2. 参数： options 对象包含 detail（数据载荷）、bubbles（是否冒泡）和 cancelable（是否可取消）。

var myEvent = new CustomEvent('myEventName', {
  detail: { userData: 'example' },
  bubbles: true,
  cancelable: false
});
elem.dispatchEvent(myEvent);

第3步：触发事件分发

当业务逻辑完成时，主动将事件投递给注册了的监听器。

1. 入口： 任意逻辑节点。
2. 动作： 调用元素的 dispatchEvent 方法传入事件实例。

// 结合前面的监听示例
obj.addEventListener("cat", function(e) { process(e.detail) });
var catEvent = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(catEvent);

低版本浏览器兼容性处理方案

在 IE8 及以下版本中，不支持 createEvent 且私有的 fireEvent 无法直接触发自定义类型。此时需采用一种模拟机制：利用 DOM 属性变更来驱动逻辑。

原理说明：

• 核心思想： 为 DOM 元素挂载一个特定的自定义属性（如 'customType'）。
• 监听机制： 绑定该元素的 onpropertychange 事件。
• 执行逻辑： 当检测到属性值的改变即视为“事件触发”，并在内部判断属性名后执行回调。

// type 为自定义事件标识，callback 为实际业务回调
obj[type] = 0; // 初始化计数器
obj[type]++;   // 触发赋值操作导致 propertychange 事件

obj.attachEvent('onpropertychange', function(event){
  if( event.propertyName == type ){
    callback.call(obj);
  }
});

通用事件管理库设计

为了统一管理事件生命周期，下面提供一个支持现代浏览器和旧版 IE 的工具类实现。该机制约定所有自定义事件必须带有 'custom' 前缀（如 customTest），以便区分对待。

主要功能：

1. add： 添加监听器。检测浏览器特性选择标准监听、IE attachEvent 还是属性覆盖方式。
2. remove： 移除对应类型的监听器，防止内存泄漏。
3. trigger： 统一触发接口，针对不同类型事件调用不同的底层分发方法。

完整代码实现

此段代码封装了事件增删改查，支持链式调用，可直接集成至项目中用于替代部分 jQuery 的事件能力。

(function( window, undefined ){

var Ev = window.Ev = window.$ = function(element){
  return new Ev.fn.init(element);
};

Ev.fn = Ev.prototype = {
  init: function(element){
    this.element = (element && element.nodeType == 1)? element: document;
  },

  /**
   * 添加事件监听
   */
  add: function(type, callback){
    var _that = this;
    
    if(_that.element.addEventListener){
       // Modern Browsers and IE9+
      _that.element.addEventListener(type, callback, false);
       
    } else if(_that.element.attachEvent){
      // IE5+
      if( type.indexOf('custom') != -1 ){
        if( isNaN( _that.element[type] ) ){
          _that.element[type] = 0;
        } 
        var fnEv = function(event){
          event = event ? event : window.event
          if( event.propertyName == type ){
            callback.call(_that.element);
          }
        };
        _that.element.attachEvent('onpropertychange', fnEv);
        // 存储回调引用方便移除
        if( !_that.element['callback' + callback] ){
          _that.element['callback' + callback] = fnEv;
        }
      } else {
        _that.element.attachEvent('on' + type, callback);
      }
       
    } else {
       // Others fallback
      _that.element['on' + type] = callback;
    }

    return _that;
  },

  /**
   * 移除事件监听
   */
  remove: function(type, callback){
    var _that = this;
     
    if(_that.element.removeEventListener){
       _that.element.removeEventListener(type, callback, false);
       
    } else if(_that.element.detachEvent){
      if( type.indexOf('custom') != -1 ){
        _that.element.detachEvent('onpropertychange', _that.element['callback' + callback]);
        _that.element['callback' + callback] = null;
      } else {
        _that.element.detachEvent('on' + type, callback);
      }

    } else {
      _that.element['on' + type] = null;
    }

    return _that;
  },
   
  /**
   * 模拟触发事件
   */
  trigger: function(type){
    var _that = this;
     
    try {
        if(_that.element.dispatchEvent){
          var evt = document.createEvent('Event');
          evt.initEvent(type, true, true);
          _that.element.dispatchEvent(evt);
        } else if(_that.element.fireEvent){
          if( type.indexOf('custom') != -1 ){
            _that.element[type]++;
          } else {
            _that.element.fireEvent('on' + type);
          }
        }

    } catch(e){}

    return _that;
  }
}

Ev.fn.init.prototype = Ev.fn;

})( window );

测试验证：

var testBox = document.getElementById('testbox');
testBox = $(testBox);

// 绑定多个回调
function triggerEvent(){ console.log('事件A'); }
function triggerAgain(){ console.log('事件B'); }
testBox.add('customConsole', triggerEvent).add('customConsole', triggerAgain);

// 触发输出两次日志
testBox.trigger('customConsole');

// 移除第二个监听
testBox.remove('customConsole', triggerAgain);

// 再次触发仅输出一次日志
testBox.trigger('customConsole');

以上就是 JavaScript 自定义事件编写的详细内容，更多关于前端模块化开发的资料请关注本站其它相关文章！