Ausführliche Erläuterung, wie benutzerdefinierte Ereigniscodebeispiele in JavaScript implementiert werden-js-Tutorial-php.cn

Wir können Ereignisse anpassen, um eine flexiblere Entwicklung zu erreichen. Ereignisse können bei richtiger Verwendung ein sehr leistungsfähiges Werkzeug sein (wird später beschrieben).

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

Um das Ereignis direkt anzupassen, verwenden Sie den Ereigniskonstruktor:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Die Optionen können sein:

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

Nach dem Login kopieren

Die Details Kann einige Initialisierungsinformationen speichern und kann bei Auslösung aufgerufen werden. Andere Eigenschaften legen fest, ob das Ereignis über Bubbling-Funktionen usw. verfügt.

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

// 绑定自定义事件
$(element).on(&#39;myCustomEvent&#39;, function(){});

// 触发事件
$(element).trigger(&#39;myCustomEvent&#39;);
此外，你还可以在触发自定义事件时传递更多参数信息：

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

Nach dem Login kopieren

Benutzerdefinierte JavaScript-Ereignisse sind benutzerdefinierte Ereignisse, die sich von Standardereignissen wie „Klicken“ und „Senden“ unterscheiden. Bevor wir die Vorteile benutzerdefinierter Ereignisse beschreiben, schauen wir uns ein Beispiel für ein benutzerdefiniertes Ereignis an:

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

Nach dem Login kopieren

Sie können die Demo für den spezifischen Effekt anzeigen. Geben Sie obj.dispatchEvent(evt) in die Konsole ein. Sie können sehen, dass in der Konsole „customEvent event is triggered“ angezeigt wird Das definierte Ereignis wurde erfolgreich ausgelöst.

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 nur eine spezielle und einfache Methode verwenden, um benutzerdefinierte Ereignisse auszulösen.

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

Nach dem Login kopieren

Das Prinzip dieser Methode besteht tatsächlich darin, dem DOM ein benutzerdefiniertes Attribut hinzuzufügen und das PropertyChange-Ereignis des Elements abzuhören, wenn der Wert eines bestimmten Attributs Wenn sich das DOM ändert, wird der Propertychange-Rückruf ausgelöst. Anschließend wird im Rückruf beurteilt, ob die geänderte Eigenschaft unsere benutzerdefinierte Eigenschaft ist. Wenn ja, wird der tatsächlich vom Entwickler 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(&#39;custom&#39;) != -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(&#39;onpropertychange&#39;, fnEv);
 
        // 在元素上存储绑定的 propertychange 的回调，方便移除事件绑定
        if( !_that.element[&#39;callback&#39; + callback] ){
     
          _that.element[&#39;callback&#39; + callback] = fnEv;
 
        }
    
      // 标准事件处理
      } else {
    
        _that.element.attachEvent(&#39;on&#39; + type, callback);
      }
       
    } else {
       
      /**
       * @supported For Others
       */
       
      _that.element[&#39;on&#39; + 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(&#39;custom&#39;) != -1 ){
 
        // 移除对相应的自定义属性的监听
        _that.element.detachEvent(&#39;onpropertychange&#39;, _that.element[&#39;callback&#39; + callback]);
 
        // 删除储存在 DOM 上的自定义事件的回调
        _that.element[&#39;callback&#39; + callback] = null;
      
      // 标准事件的处理
      } else {
      
        _that.element.detachEvent(&#39;on&#39; + type, callback);
      
      }
 
    } else {
       
      /**
       * @supported For Others
       */
       
      _that.element[&#39;on&#39; + 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(&#39;Event&#39;);
        // 定义事件的类型
        evt.initEvent(type, true, true);
        // 触发事件
        _that.element.dispatchEvent(evt);
      // IE
      } else if(_that.element.fireEvent){
         
        if( type.indexOf(&#39;custom&#39;) != -1 ){
 
          _that.element[type]++;
 
        } else {
 
          _that.element.fireEvent(&#39;on&#39; + type);
        }
    
      }
 
    } catch(e){
 
    };
 
    return _that;
       
  }
}
 
Ev.fn.init.prototype = Ev.fn;
 
})( window );
测试用例1（自定义事件测试）

// 测试用例1（自定义事件测试）
// 引入事件机制
// ...
// 捕捉 DOM
var testBox = document.getElementById(&#39;testbox&#39;);
// 回调函数1
function triggerEvent(){
    console.log(&#39;触发了一次自定义事件 customConsole&#39;);
}
// 回调函数2
function triggerAgain(){
    console.log(&#39;再一次触发了自定义事件 customConsole&#39;);
}
// 封装
testBox = $(testBox);
// 同时绑定两个回调函数，支持链式调用
testBox.add(&#39;customConsole&#39;, triggerEvent).add(&#39;customConsole&#39;, triggerAgain);

Nach dem Login kopieren

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.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie benutzerdefinierte Ereigniscodebeispiele in JavaScript implementiert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!