Detailed explanation of writing custom events in JavaScript

we can customize events to achieve more flexible development. events can be a very powerful tool when used properly. event-based development has many advantages (described later).

the functions related to custom events are event, customevent and dispatchevent.

to customize events directly, use the event constructor:

var event = new event('build');

// listen for the event.
elem.addeventlistener('build', function (e) { ... }, false);

// dispatch the event.
elem.dispatchevent(event);

Copy after login

customevent can create a more highly customized event and can also attach some data. the specific usage is as follows:

var myevent = new customevent(eventname, options);

Copy after login

where options can be:

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

Copy after login

detail can store some initialization information and can be called when triggered. other properties define whether the event has bubbling functions and so on.

built-in events will be triggered by the browser based on certain operations, while custom events need to be triggered manually. the dispatchevent function is used to trigger an event:

element.dispatchevent(customevent);

Copy after login

the above code indicates that the customevent event is triggered on element. used in combination:

// 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);

Copy after login

using custom events requires attention to compatibility issues, but using jquery is much simpler:

// 绑定自定义事件
$(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" ] );
});

Copy after login

javascript custom events are self-customized events that are different from standard events such as click, submit, etc. before describing the benefits of custom events, let’s look at an example of a custom event:

<div id="testbox"></div>

// 创建事件
var evt = document.createevent('event');
// 定义事件类型
evt.initevent('customevent', true, true);
// 在元素上监听事件
var obj = document.getelementbyid('testbox');
obj.addeventlistener('customevent', function(){
  console.log('customevent 事件触发了');
}, false);

Copy after login

for specific effects, you can view the demo. enter obj.dispatchevent(evt) in the console. you can see that "customevent event is triggered" is output in the console, indicating that the custom event is successfully triggered.

in this process, the createevent method creates an empty event evt, then uses the initevent method to define the event type as the agreed custom event, then monitors the corresponding element, and then uses dispatchevent to trigger the event.

yes, the mechanism of custom events is the same as that of ordinary events - listen to the event, write the callback operation, and execute the callback after the event is triggered. but the difference is that custom events are completely controlled by us when they are triggered, which means a kind of javascript decoupling is achieved. we can flexibly control multiple related but logically complex operations using the custom event mechanism.

of course, as you may have guessed, the above code does not take effect in lower versions of ie. in fact, createevent() is not supported in ie8 and lower versions of ie, but there is ie's private fireevent() method. , but unfortunately, fireevent only supports the triggering of standard events. therefore, we can only use a special and simple method to trigger custom events.

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

Copy after login

the principle of this method is actually to add a custom attribute to the dom and at the same time listen to the propertychange event of the element. when the value of a property of the dom changes, the propertychange callback will be triggered, and the occurrence will be judged in the callback. whether the changed attribute is our custom attribute, if so, the callback actually defined by the developer will be executed. this simulates the mechanism of custom events.

in order to make the custom event mechanism cooperate with the monitoring and simulation triggering of standard events, a complete event mechanism is given here. this mechanism supports the monitoring, removal of monitoring and simulation triggering operations of standard events and custom events. it should be noted that in order to make the logic of the code clearer, it is agreed that custom events are prefixed with 'custom' (for example: 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);

Copy after login

the complete code is in demo.

after opening the demo, call testbox.trigger('customconsole') in the console to trigger the custom event yourself. you can see that the console outputs two prompts. then enter testbox.remove('customconsole', triggeragain) to remove the pair. for the latter listener, use testbox.trigger('customconsole') to trigger a custom event. you can see that the console only outputs a prompt, that is, the last listener is successfully removed. at this point, all functions of the event mechanism are working normally.

Detailed explanation of writing custom events in JavaScript_Basic knowledge