Detailed explanation of how to implement custom event code examples 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 include Event, CustomEvent and dispatchEvent.

Directly customize the event, 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);

CustomEvent can create a more highly customized event, and can also attach some data, specific usage As follows:

##

var myEvent = new CustomEvent(eventname, options);

where options can be:

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

where detail can store some initialization information, which can be in 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);

The above code indicates that the customEvent event is triggered on element. The combination is:

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

You need to pay attention to compatibility issues when using custom events, 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" ] );
});

JavaScript custom events are customized events that are different from standard events such as click and submit. Before describing the benefits of custom events, let’s look at an example of a custom event:

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

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 event.

Yes, the mechanism of custom events is the same as that of ordinary events - listen to events, write callback operations, and execute callbacks 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, you may have guessed that 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);
  }
});

The principle of this method is actually to add a custom attribute to the DOM and listen to the propertychange event of the element. When the value of a certain attribute of the DOM changes, The propertychange callback will be triggered, and then it will be judged in the callback whether the changed property is our custom property. If so, the callback actually defined by the developer will be executed. This simulates the mechanism of custom events.

In order to enable the custom event mechanism to cooperate with the monitoring and simulation triggering of standard events, a complete event mechanism is given here. This mechanism supports the monitoring of standard events and custom events, and removes monitoring and simulation. Trigger action. 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);

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, and then enter testBox.remove('customConsole', triggerAgain) Remove the last listener, and then use testBox.trigger('customConsole') to trigger the 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 work normally.

The above is the detailed content of Detailed explanation of how to implement custom event code examples in JavaScript. For more information, please follow other related articles on the PHP Chinese website!