Grundkenntnisse im Schreiben benutzerdefinierter Ereignisse in JavaScript

Benutzerdefinierte Ereignisse unterscheiden sich von Ereignissen mit browserspezifischem Verhalten (ähnlich wie Klick-, Mouseover-, Submit-, Keydown- und andere Ereignisse). Der Ereignisname kann nach Belieben definiert und über bestimmte Methoden hinzugefügt und ausgelöst werden . In diesem Artikel werden wir über die Grundlagen des Schreibens benutzerdefinierter Ereignisse in JavaScript sprechen.

Zu den Funktionen im Zusammenhang mit benutzerdefinierten Ereignissen gehören „Event“, „CustomEvent“ und „dispatchEvent“.

Passen Sie das Ereignis direkt an und verwenden Sie den Ereigniskonstruktor:

var event = new Event('build');

// Warten Sie auf das Ereignis.
elem.addEventListener('build', function (e) { ... }, false);

// Versende das Ereignis.
elem.dispatchEvent(event) ;

CustomEvent kann ein stärker angepasstes Ereignis erstellen und auch einige Daten anhängen. Die spezifische Verwendung ist wie folgt:

var myEvent = new CustomEvent(eventname, options);

wobei Optionen sein können:

{
Detail: {
...
},
Blasen: wahr,
stornierbar: falsch
}

Das Detail kann einige Initialisierungsinformationen speichern und bei Auslösung aufgerufen werden. Andere Eigenschaften legen fest, ob das Ereignis Bubbling-Funktionen usw. hat.

Eingebaute Ereignisse werden vom Browser basierend auf bestimmten Vorgängen ausgelöst, während benutzerdefinierte Ereignisse manuell ausgelöst werden müssen. Die Funktion „dispatchEvent“ wird verwendet, um ein Ereignis auszulösen:

element.dispatchEvent(customEvent);

Der obige Code zeigt an, dass das Ereignis „customEvent“ für das Element ausgelöst wird. Die Kombination ist:

// einen geeigneten Ereignis-Listener hinzufügen
obj.addEventListener("cat", function(e) { Process(e.detail) } ) ;

// das Ereignis erstellen und versenden
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent( event );

Die Verwendung benutzerdefinierter Ereignisse erfordert die Beachtung von Kompatibilitätsproblemen, aber die Verwendung von jQuery ist viel einfacher:

// Benutzerdefiniertes Ereignis binden
$(element).on('myCustomEvent', function(){});

// Ereignis auslösen
$(element trigger('myCustomEvent'). );
Darüber hinaus können Sie beim Auslösen eines benutzerdefinierten Ereignisses weitere Parameterinformationen übergeben:

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

Benutzerdefinierte JavaScript-Ereignisse unterscheiden sich von benutzerdefinierten Ereignissen wie Klicken, Senden und anderen Standardereignisse. Bevor wir die Vorteile benutzerdefinierter Ereignisse beschreiben, schauen wir uns ein Beispiel eines benutzerdefinierten Ereignisses an:

// Ereignis erstellen var evt = document.createEvent('Event'); //Ereignistyp definieren evt.initEvent('customEvent', true, true); //Ereignisse auf dem Element abhören var obj = document.getElementById('testBox'); obj.addEventListener('customEvent', function(){ console.log('customEvent-Ereignis ausgelöst'); }, false);

Für bestimmte Effekte können Sie die Demo anzeigen. Sie können sehen, dass „customEvent“ ausgelöst wird „ wird in der Konsole ausgegeben. Zeigt an, dass das benutzerdefinierte Ereignis erfolgreich ausgelöst wurde.

In diesem Prozess erstellt die Methode „createEvent“ ein leeres Ereignisereignis, verwendet dann die Methode „initEvent“, um den Ereignistyp als vereinbartes benutzerdefiniertes Ereignis zu definieren, überwacht dann das entsprechende Element und verwendet dann „dispatchEvent“, um das Ereignis auszulösen.

Ja, der Mechanismus benutzerdefinierter Ereignisse ist der gleiche wie bei gewöhnlichen Ereignissen: Hören Sie sich das Ereignis an, schreiben Sie die Rückrufoperation und führen Sie den Rückruf aus, nachdem das Ereignis ausgelöst wurde. Der Unterschied besteht jedoch darin, dass benutzerdefinierte Ereignisse bei ihrer Auslösung vollständig von uns kontrolliert werden, wodurch eine Art JavaScript-Entkopplung erreicht wird. Mithilfe des benutzerdefinierten Ereignismechanismus können wir mehrere zusammenhängende, aber logisch komplexe Vorgänge flexibel steuern.

Natürlich haben Sie vielleicht vermutet, dass der obige Code in niedrigeren Versionen des IE nicht wirksam wird. Tatsächlich wird createEvent() in IE8 und niedrigeren Versionen des IE nicht unterstützt, aber es gibt das private fireEvent des IE ()-Methode, aber leider unterstützt fireEvent nur das Auslösen von Standardereignissen. Daher können wir zum Auslösen benutzerdefinierter Ereignisse nur eine spezielle und einfache Methode verwenden.

// Typ ist ein benutzerdefiniertes Ereignis, z. B. Typ = 'customEvent', Rückruf ist die tatsächlich vom Entwickler definierte Rückruffunktion
obj[typ] = 0 ;
obj[type]++;

obj.attachEvent('onpropertychange', function(event){
if( event.propertyName == type ){
callback.call( obj) ;
}
});

Das Prinzip dieser Methode besteht darin, dem DOM ein benutzerdefiniertes Attribut hinzuzufügen und gleichzeitig das PropertyChange-Ereignis des Elements abzuhören. Wenn sich der Wert einer Eigenschaft des DOM ändert, wird der PropertyChange-Rückruf ausgelöst. Anschließend wird im Rückruf beurteilt, ob das geänderte Attribut unser benutzerdefiniertes Attribut ist. Wenn ja, wird der vom Entwickler tatsächlich definierte Rückruf ausgeführt. Dadurch wird der Mechanismus benutzerdefinierter Ereignisse simuliert.

Damit der benutzerdefinierte Ereignismechanismus mit der Überwachung und Simulation von Standardereignissen zusammenarbeitet, finden Sie hier einen vollständigen Ereignismechanismus. Dieser Mechanismus unterstützt die Überwachung von Standardereignissen und benutzerdefinierten Ereignissen und entfernt Überwachung und Simulation. Aktion auslösen. Es ist zu beachten, dass zur Verdeutlichung der Logik des Codes vereinbart wird, dass benutzerdefinierten Ereignissen das Präfix „custom“ vorangestellt wird (z. B.: 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 );

Testfall 1 (benutzerdefinierter Ereignistest)

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

Der vollständige Code befindet sich in der Demo.

Nach dem Öffnen der Demo rufen Sie testBox.trigger('customConsole') in der Konsole auf, um das benutzerdefinierte Ereignis selbst auszulösen. Sie können sehen, dass die Konsole zwei Eingabeaufforderungen ausgibt, und geben Sie dann testBox.remove('customConsole') ein. , triggerAgain) Entfernen Sie den letzten Listener und lösen Sie dann das benutzerdefinierte Ereignis mit testBox.trigger('customConsole') aus. Sie können sehen, dass die Konsole nur eine Eingabeaufforderung ausgibt, dh der letzte Listener wurde erfolgreich entfernt. Alle Funktionen des Ereignismechanismus funktionieren normal.

Der obige Inhalt ist das Grundwissen zum Schreiben benutzerdefinierter Ereignisse in JavaScript. Ich hoffe, dass es jedem helfen kann.

Verwandte Empfehlungen:

Ausführliche Erklärung zur Implementierung benutzerdefinierter Ereigniscodebeispiele in JavaScript

Das benutzerdefinierte Ereignis wurde erfolgreich gelöst und das Problem gelöst BUG durch wiederholte Anfragen

So erstellen Sie benutzerdefinierte Ereignisse in JavaScript

Benutzerdefinierte Ereignisse in Javascript

Javascript Eine vorläufige Studie zu benutzerdefinierten Ereignissen_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonGrundkenntnisse im Schreiben benutzerdefinierter Ereignisse in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!