Connaissance de base de l'écriture d'événements personnalisés en JavaScript

Les événements personnalisés sont différents des événements avec des comportements spécifiques au navigateur (similaires au clic, au survol de la souris, à la soumission, à la frappe et à d'autres événements). Le nom de l'événement peut être défini à volonté, et peut être ajouté et déclenché via des méthodes spécifiques et supprimé. . Dans cet article, nous parlerons des bases de l'écriture d'événements personnalisés en JavaScript.

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

Personnalisez directement l'événement et utilisez le constructeur Event :

var event = new Event('build');

// Écoutez l'événement.
elem.addEventListener('build', function (e) { ... }, false);

// Distribuez l'événement.
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);

où les options peuvent être :

{
détail : {
...
},
bulles : vrai,
annulable : faux
}

Le détail peut stocker certaines informations d'initialisation et peut être appelé lorsqu'il est déclenché. 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 permet de 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 :

// ajouter un écouteur d'événement approprié
obj.addEventListener("cat", function(e) { process(e.detail) } ) ;

// créer et distribuer l'événement
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent( event );

L'utilisation d'événements personnalisés nécessite de prêter attention aux problèmes de compatibilité, mais utiliser jQuery est beaucoup plus simple :

// Lier un événement personnalisé
$(element).on('myCustomEvent', function(){});

// Déclencher un événement
$(element) trigger('myCustomEvent'). );
De plus, vous pouvez transmettre plus d'informations sur les paramètres lors du déclenchement d'un événement personnalisé :

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

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

// Créer un événement. var evt = document.createEvent('Événement'); //Définir le type d'événement evt.initEvent('customEvent', true, true); //Écouter les événements sur l'élément var obj = document.getElementById('testBox'); obj.addEventListener('customEvent', function(){ console.log('événement customEvent déclenché'); }, false);

Pour des effets spécifiques, vous pouvez voir la démo. Entrez obj.dispatchEvent(evt) dans la console. Vous pouvez voir que "l'événement customEvent est déclenché. " s'affiche dans la console. Indique que l'événement personnalisé a été 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 est un événement personnalisé, tel que type = 'customEvent', le rappel est la fonction de rappel réellement définie par le développeur
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 en même temps d'écouter l'événement propertychange de l'élément Lorsque la valeur d'une propriété du DOM change, le rappel propertychange sera déclenché, puis l'événement sera jugé dans le rappel. Si l'attribut modifié est notre attribut personnalisé, si tel est le cas, le rappel réellement défini par le développeur sera 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 );

Cas de test 1 (test d'événement personnalisé)

// 测试用例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.

Le contenu ci-dessus constitue la connaissance de base de l'écriture d'événements personnalisés en JavaScript. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

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

Résolution réussie de l'événement personnalisé et résolution du problème BUG des requêtes répétées

Comment créer des événements personnalisés en JavaScript

Événements personnalisés en javascript

javascript Une étude préliminaire sur les compétences personnalisées events_javascript

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!