addEventListener für ein benutzerdefiniertes Objekt

addEventListener ist bestimmt für DOM-Elemente, die bestimmte event-bezogene Schnittstellen. Wenn Sie möchten, eine event-system auf Reine JavaScript-Objekte, die Sie sich für eine eigene event-system. Ein Beispiel wäre Backbone.Events im Backbone.js. Die Grundidee ist mit einem object als hash zu verfolgen registrierten Rückrufe.

Ich persönlich verwende diese: https://github.com/component/emitter

Es ist eine ziemlich einfache und elegante Lösung - mit süßen, kurzen Methode Namen wie on()off() und emit(). Sie können entweder erstellen Sie neue Instanzen mit new Emitter() oder verwenden Emitter(obj) zu mischen-Ereignis-Funktionen in bestehende Objekte. Hinweis: diese Bibliothek ist geschrieben für die Verwendung eines CommonJS-Modul-system, aber Sie können es verwenden, überall sonst durch das entfernen der module.exports = ... Linie.

InformationsquelleAutor der Antwort Evan You

Wenn Sie nicht brauchen, true event-Funktionen(wie Blasen, stopPropagation), dann können Sie implementieren Ihre eigenen Veranstaltungen. addEventListener ist nur eine API in der DOM -, so dass Sie nicht wirklich brauchen es für Ihre eigenen Objekte außerhalb der DOM. Wenn Sie möchten, erstellen Sie eine evented Muster um ein Objekt herum, hier ist ein guter Weg, es zu tun, erfordert keine zusätzlichen browser-APIs und soll sehr kompatibel.

Lassen Sie uns sagen, Sie haben ein Objekt, wo Sie wollen eine Reihe von Ereignissen ausgelöst werden, wenn die dispatch-Methode aufgerufen wird:

var OurDispatcher, dispatcher;

OurDispatcher = (function() {
  function OurDispatcher() {
    this.dispatchHandlers = [];
  }

  OurDispatcher.prototype.on = function(eventName, handler) {
    switch (eventName) {
      case "dispatch":
        return this.dispatchHandlers.push(handler);
      case "somethingElse":
        return alert('write something for this event :)');
    }
  };

  OurDispatcher.prototype.dispatch = function() {
    var handler, i, len, ref;
    ref = this.dispatchHandlers;
    for (i = 0, len = ref.length; i < len; i++) {
      handler = ref[i];
      setTimeout(handler, 0);
    }
  };

  return OurDispatcher;

})();

dispatcher = new OurDispatcher();

dispatcher.on("dispatch", function() {
  return document.body.innerHTML += "DISPATCHED</br>";
});

dispatcher.on("dispatch", function() {
  return document.body.innerHTML += "DISPATCHED AGAIN</br>";
});

dispatcher.dispatch();

Es ist wirklich nicht komplizierter als die, für die meisten Teil. Auf diese Weise haben Sie einige anständige Kontrolle über Ihre Veranstaltungen und Sie müssen nicht sorgen zu machen über die rückwärts-Kompatibilität oder externe Bibliotheken, weil dort alles stark unterstützt wird. Technisch könnten Sie sogar tun, ohne setTimeout und Griff Ihre Rückrufe ohne APIs. Alles andere wie stopPropagation() behandelt werden müssten sich.

https://jsfiddle.net/ozsywxer/

Gibt es, natürlich, polyfills für das CustomEvent, aber es sei denn, ich brauche advanced Veranstaltung bietet, bevorzuge ich wickle meine eigenen eventing-system in eine "Klasse" und Erweiterung anderer Klassen/Funktionen mit.

Hier ist der CoffeeScript-version, die ist, was der JavaScript-Code ist abgeleitet von:
https://jsfiddle.net/vmkkbbxq/1/

^^ Ein bisschen leichter zu verstehen.

InformationsquelleAutor der Antwort Ravenstine

Wenn Sie in einer Node.js Umgebung, dann können Sie Knoten die EventEmitter-Klasse:

CustomObject.js

const EventEmitter = require('events');

class CustomObject extends EventEmitter {
  constructor() {
    super();
  }

  doSomething() {
    const event = {message: 'Hello World!'};
    this.emit('myEventName', event);
  }
}

module.exports = CustomObject;

Verwendung:

const CustomObject = require('./CustomObject');

//1. Create a new instance
const myObject = new CustomObject();

//2. Subscribe to events with ID "myEventName"
myObject.on('myEventName', function(event) {
  console.log('Received event', event);
});

//3. Trigger the event emitter
myObject.doSomething();

Wenn Sie möchten, verwenden Sie Knoten EventEmitter außerhalb der Node.js Umgebung ist, dann können Sie webpack (vorzugsweise v2.2 oder später), um ein Bündel von Ihrer CustomClass zusammen mit einem EventEmitter polyfill (gebaut von webpack).

Hier ist, wie es funktioniert (vorausgesetzt, das Sie installiert webpack weltweit mit npm install -g webpack):

1. Laufen webpack CustomObject.js bundle.js --output-library=CustomObject
2. Gehören bundle.js in Ihre HTML-Seite (es wird setzen window.CustomObject)
3. Es gibt keinen Schritt drei!

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="bundle.js"></script>
  </head>
  <body>
    <script>
      //1. Create a new instance
      const myObject = new window.CustomObject();

      //2. Subscribe to events with ID "myEventName"
      myObject.on('myEventName', function(event) {
        console.log('Received event', event);
      });

      //3. Trigger the event emitter
      myObject.doSomething();
    </script>
  </body>
</html>

InformationsquelleAutor der Antwort Benny Neugebauer

Dieser Artikel erläutert das erstellen von benutzerdefinierten Ereignissen: http://www.sitepoint.com/javascript-custom-events/

hier ist ein Beispiel:

erstellen Sie die Ereignis -

var event = new CustomEvent(
    "newMessage",
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);

ordnen Sie die Veranstaltung zu etwas -

document.getElementById("msgbox").dispatchEvent(event);

abonnieren Sie den event -

document.addEventListener("newMessage", newMessageHandler, false);

InformationsquelleAutor der Antwort Dawson Loudon

Verwendung: jsfiddle

Dies ist eine naive Herangehensweise, aber funktioniert vielleicht für einige Anwendungen:

CustomEventTarget.prototype = {

    'constructor': CustomEventTarget,

    on:   function( ev, el ) { this.eventTarget.addEventListener( ev, el ) },
    off:  function( ev, el ) { this.eventTarget.removeEventListener( ev, el ) },
    emit: function( ev ) { this.eventTarget.dispatchEvent( ev ) }

}

function CustomEventTarget() { this.eventTarget = new EventTarget }

InformationsquelleAutor der Antwort flcoder