Explication détaillée de la façon d'implémenter des exemples de code d'événement personnalisé en JavaScript

Nous pouvons personnaliser les événements pour obtenir un développement plus flexible. Les événements peuvent être un outil très puissant lorsqu'ils sont utilisés correctement. Le développement basé sur les événements présente de nombreux avantages (décrits plus loin).

Les fonctions liées aux événements personnalisés incluent Event, CustomEvent et dispatchEvent.

Pour personnaliser directement l'événement, utilisez le constructeur Event :

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

CustomEvent peut créer un événement plus personnalisé et peut également joindre certaines données. L'utilisation spécifique est la suivante :

var myEvent = new CustomEvent(eventname, options);

Les options peuvent être :

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

Les détails peut stocker certaines informations d'initialisation et peut être appelée lorsqu'elle est déclenchée. D'autres propriétés définissent si l'événement a des fonctions de bouillonnement, etc.

Les événements intégrés seront déclenchés par le navigateur en fonction de certaines opérations, tandis que les événements personnalisés doivent être déclenchés manuellement. La fonction dispatchEvent est utilisée pour déclencher un événement :

element.dispatchEvent(customEvent);

Le code ci-dessus indique que l'événement customEvent est déclenché sur l'élément. La combinaison est la suivante :

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

L'utilisation d'événements personnalisés nécessite une attention particulière aux problèmes de compatibilité, mais l'utilisation de jQuery est beaucoup plus simple :

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

Les événements personnalisés JavaScript sont des événements personnalisés qui sont différents des événements standards tels que cliquer et soumettre. Avant de décrire les avantages des événements personnalisés, regardons un exemple d'événement personnalisé :

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

Vous pouvez voir la démo pour l'effet spécifique. Entrez obj.dispatchEvent(evt) dans la console. Vous pouvez voir que "l'événement customEvent est déclenché" est affiché dans la console, indiquant que depuis. L'événement défini est déclenché avec succès.

Dans ce processus, la méthode createEvent crée un événement vide, puis utilise la méthode initEvent pour définir le type d'événement comme événement personnalisé convenu, puis surveille l'élément correspondant, puis utilise dispatchEvent pour déclencher l'événement.

Oui, le mécanisme des événements personnalisés est le même que celui des événements ordinaires : écoutez l'événement, écrivez l'opération de rappel et exécutez le rappel après le déclenchement de l'événement. Mais la différence est que nous contrôlons entièrement les événements personnalisés lorsqu’ils sont déclenchés, ce qui signifie qu’une sorte de découplage JavaScript est réalisé. Nous pouvons contrôler de manière flexible plusieurs opérations liées mais logiquement complexes à l'aide du mécanisme d'événements personnalisé.

Bien sûr, vous avez peut-être deviné que le code ci-dessus ne prend pas effet dans les versions inférieures d'IE. En fait, createEvent() n'est pas pris en charge dans IE8 et les versions inférieures d'IE, mais il existe un fireEvent privé d'IE. (), mais malheureusement, fireEvent ne prend en charge que le déclenchement d'événements standards. Par conséquent, nous ne pouvons utiliser qu’une méthode spéciale et simple pour déclencher des événements personnalisés.

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

Le principe de cette méthode est en fait d'ajouter un attribut personnalisé au DOM et d'écouter l'événement propertychange de l'élément lorsque la valeur d'un certain attribut. du DOM se produit Lorsqu'il change, le rappel de changement de propriété est déclenché, puis dans le rappel, il est jugé si la propriété modifiée est notre propriété personnalisée, et si tel est le cas, le rappel réellement défini par le développeur est exécuté. Cela simule le mécanisme des événements personnalisés.

Afin de faire coopérer le mécanisme d'événements personnalisés avec le déclenchement de surveillance et de simulation d'événements standard, voici un mécanisme d'événements complet. Ce mécanisme prend en charge la surveillance des événements standard et des événements personnalisés, et supprime la surveillance et la simulation. Action de déclenchement. Il est à noter que afin de rendre la logique du code plus claire, il est convenu que les événements personnalisés soient préfixés par 'custom' (par exemple : 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);

Le code complet est en Démo.

Après avoir ouvert la démo, appelez testBox.trigger('customConsole') dans la console pour déclencher vous-même l'événement personnalisé. Vous pouvez voir que la console affiche deux invites, puis entrez testBox.remove('customConsole'. , triggerAgain) Supprimez le dernier écouteur, puis utilisez testBox.trigger('customConsole') pour déclencher l'événement personnalisé. Vous pouvez voir que la console affiche uniquement une invite, c'est-à-dire que le dernier écouteur est supprimé avec succès. toutes les fonctions du mécanisme événementiel fonctionnent normalement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!