JavaScript中如何實作自訂事件程式碼實例詳解

我們可以自訂事件來實現更靈活的開發，事件用好了可以是一件很強大的工具，基於事件的開發有很多優點（後面介紹）。

與自訂事件的函式有 Event、CustomEvent 和 dispatchEvent。

直接自訂事件，使用Event 建構函式：

var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);

CustomEvent 可以建立一個更高度自訂事件，也可以附帶一些數據，具體用法如下：

var myEvent = new CustomEvent(eventname, options);

其中options 可以是：

{
  detail: {
    ...
  },
  bubbles: true,
  cancelable: false
}

其中detail 可以存放一些初始化的訊息，可以在觸發的時候調用。其他屬性就是定義該事件是否具有冒泡等等功能。

內建的事件會由瀏覽器根據某些操作觸發，自訂的事件就需要人工觸發。 dispatchEvent 函式就是用來觸發某個事件：

element.dispatchEvent(customEvent);

上面程式碼表示，在 element 上面觸發 customEvent 這個事件。結合起來用就是：

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

使用自訂事件需要注意相容性問題，而使用jQuery 就簡單多了：

// 绑定自定义事件
$(element).on('myCustomEvent', function(){});

// 触发事件
$(element).trigger('myCustomEvent');
此外，你还可以在触发自定义事件时传递更多参数信息：

$( "p" ).on( "myCustomEvent", function( event, myName ) {
 $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
 $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});

JavaScript 自訂事件就是有別於如click, submit 等標準事件的自行自訂的事件，在敘述自訂事件有何好處之前，先來看一個自訂事件的例子：

<p id="testBox"></p>

// 创建事件
var evt = document.createEvent(&#39;Event&#39;);
// 定义事件类型
evt.initEvent(&#39;customEvent&#39;, true, true);
// 在元素上监听事件
var obj = document.getElementById(&#39;testBox&#39;);
obj.addEventListener(&#39;customEvent&#39;, function(){
  console.log(&#39;customEvent 事件触发了&#39;);
}, false);

具體效果可以查看Demo，在console 中輸入obj.dispatchEvent(evt)，可以看到console 中輸出“customEvent 事件觸發了”，表示自訂事件成功觸發。

在這個過程中，createEvent 方法建立了一個空事件evt，然後使用initEvent 方法定義事件的類型為約定好的自訂事件，再對對應的元素進行監聽，接著，就是使用dispatchEvent 觸發事件了。

沒錯，自訂事件的機制如普通事件一樣－監聽事件，寫回呼操作，觸發事件後執行回呼。但不同的是，自訂事件完全由我們控制觸發時機，這意味著實作了一種 JavaScript 的解耦。我們可以把多個關聯但邏輯複雜的操作利用自訂事件的機制靈活地控制好。

當然，可能你已經猜到了，上面的程式碼在低版的IE 中並不生效，事實上在IE8 及以下版本的IE 中並不支援createEvent()，而有IE 私有的fireEvent () 方法，但遺憾的是，fireEvent 只支援標準事件的觸發。因此，我們只能使用一個特殊而簡單的方法來觸發自訂事件。

// type 为自定义事件，如 type = 'customEvent'，callback 为开发者实际定义的回调函数
obj[type] = 0;
obj[type]++;
 
obj.attachEvent('onpropertychange', function(event){
  if( event.propertyName == type ){
    callback.call(obj);
  }
});

這個方法的原理其實是在DOM 中增加一個自訂屬性，同時監聽元素的propertychange 事件，當DOM 的某個屬性的值改變時就會觸發propertychange 的回呼，再在回呼中判斷發生改變的屬性是否為我們的自訂屬性，若是則執行開發者實際定義的回呼。從而模擬了自訂事件的機制。

為了使到自訂事件的機制能配合標準事件的監聽和模擬觸發，這裡給出一個完整的事件機制，這個機制支援標準事件和自訂事件的監聽，移除監聽和模擬觸發操作。需要注意的是，為了讓到程式碼的邏輯更加清晰，這裡約定自訂事件帶有 'custom' 的前綴（例如：customTest，customAlert）。

/**
 * @description 包含事件监听、移除和模拟事件触发的事件机制，支持链式调用
 *
 */
 
(function( window, undefined ){
 
var Ev = window.Ev = window.$ = function(element){
 
  return new Ev.fn.init(element);
};
 
// Ev 对象构建
 
Ev.fn = Ev.prototype = {
 
  init: function(element){
 
    this.element = (element && element.nodeType == 1)? element: document;
  },
 
  /**
   * 添加事件监听
   * 
   * @param {String} type 监听的事件类型
   * @param {Function} callback 回调函数
   */
 
  add: function(type, callback){
 
    var _that = this;
     
    if(_that.element.addEventListener){
       
      /**
       * @supported For Modern Browers and IE9+
       */
       
      _that.element.addEventListener(type, callback, false);
       
    } else if(_that.element.attachEvent){
       
      /**
       * @supported For 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);
 
        // 在元素上存储绑定的 propertychange 的回调，方便移除事件绑定
        if( !_that.element['callback' + callback] ){
     
          _that.element['callback' + callback] = fnEv;
 
        }
    
      // 标准事件处理
      } else {
    
        _that.element.attachEvent('on' + type, callback);
      }
       
    } else {
       
      /**
       * @supported For Others
       */
       
      _that.element['on' + type] = callback;
 
    }
 
    return _that;
  },
 
  /**
   * 移除事件监听
   * 
   * @param {String} type 监听的事件类型
   * @param {Function} callback 回调函数
   */
   
  remove: function(type, callback){
 
    var _that = this;
     
    if(_that.element.removeEventListener){
       
      /**
       * @supported For Modern Browers and IE9+
       */
       
      _that.element.removeEventListener(type, callback, false);
       
    } else if(_that.element.detachEvent){
       
      /**
       * @supported For IE5+
       */
       
      // 自定义事件处理
      if( type.indexOf('custom') != -1 ){
 
        // 移除对相应的自定义属性的监听
        _that.element.detachEvent('onpropertychange', _that.element['callback' + callback]);
 
        // 删除储存在 DOM 上的自定义事件的回调
        _that.element['callback' + callback] = null;
      
      // 标准事件的处理
      } else {
      
        _that.element.detachEvent('on' + type, callback);
      
      }
 
    } else {
       
      /**
       * @supported For Others
       */
       
      _that.element['on' + type] = null;
       
    }
 
    return _that;
 
  },
   
  /**
   * 模拟触发事件
   * @param {String} type 模拟触发事件的事件类型
   * @return {Object} 返回当前的 Kjs 对象
   */
   
  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);
      // IE
      } 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 );
测试用例1（自定义事件测试）

// 测试用例1（自定义事件测试）
// 引入事件机制
// ...
// 捕捉 DOM
var testBox = document.getElementById('testbox');
// 回调函数1
function triggerEvent(){
    console.log('触发了一次自定义事件 customConsole');
}
// 回调函数2
function triggerAgain(){
    console.log('再一次触发了自定义事件 customConsole');
}
// 封装
testBox = $(testBox);
// 同时绑定两个回调函数，支持链式调用
testBox.add('customConsole', triggerEvent).add('customConsole', triggerAgain);

完整的程式碼在 Demo。

開啟Demo 後，在console 中呼叫testBox.trigger('customConsole') 自行觸發自訂事件，可以看到console 輸出兩個提示語，再輸入testBox.remove('customConsole', triggerAgain)移除對後一個監聽，這時再使用testBox.trigger('customConsole') 觸發自訂事件，可以看到console 只輸出一個提示語，即成功移除後一個監聽，至此事件機制所有功能正常工作。

以上是JavaScript中如何實作自訂事件程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！