Wie erstelle ich eine benutzerdefinierte Ereignisklasse in Javascript?

Wie erstelle ich eine benutzerdefinierte event-Klasse ähnlich zu ActionScript? Was ich damit meine, ist eine Klasse, die ich verwenden können, um das Feuer aus meinen eigenen Veranstaltungen, senden Sie die erforderlichen Daten ein.

I don ' T wanna die Verwendung von third-party-Bibliotheken wie YUI oder jQuery zu tun. Mein Ziel ist es, in der Lage sein zu senden, ein Ereignis, das so aussieht.

document.addEventListener("customEvent", eventHandler, false);

function eventHandler(e){
    alert(e.para1);
}

document.dispatchEvent(new CustomEvent("customEvent", para1, para2));

Bitte keine third-party-library-Lösungen.

InformationsquelleAutor der Frage Josua Pedersen | 2010-01-13

Eine Methode, die für mich gearbeitet wurde, rufen Dokument.createEvent(), init und Versand mit Fenster.dispatchEvent().

  var event = document.createEvent("Event");
  event.initEvent("customEvent", true, true);
  event.customData = getYourCustomData();
  window.dispatchEvent(event);

InformationsquelleAutor der Antwort pfleidi

5

Ich bin ein wenig spät zur party hier, aber war auf der Suche für die gleiche Sache. Ich bin nicht scharf auf die erste Antwort (siehe oben), weil es stützt sich auf das Dokument zu verwalten, das benutzerdefinierte Ereignis. Dies ist gefährlich, weil es global und potenziell Konflikt mit einem anderen script sollte das Skript zufällig verlassen Sie sich auf die gleiche benutzerdefinierte Ereignis.

Die beste Lösung, die ich gefunden habe ist hier:
Nicholas C. Zakas - eigene Events in Javascript

Leider, da javascript nicht unterstützt, ist die Vererbung Schlüsselwörter, es ist ein bisschen chaotisch mit prototyping, aber es ist definitiv hält die Dinge ordentlich.

InformationsquelleAutor der Antwort Rich Hauck
1

Dies ist unkompliziert, wenn Sie mithilfe von DOM-Elementen zur Vermittlung der Ereignisse.

Gegeben ein element:
```
var element = document.querySelector('div#rocket');
```
Für einen client zu abonnieren:
```
element.addEventListener('liftoff', function(e)
{
    console.log('We have liftoff!');
});
```
Dann zu Versand/raise/Feuer der Fall, verwenden Sie diesen code:
```
element.dispatch(new Event('liftoff'));
```
InformationsquelleAutor der Antwort Drew Noakes

-1

Diese von John Resig:

function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}

Mehr an seinem blog-post an http://ejohn.org/projects/flexible-javascript-events/.

InformationsquelleAutor der Antwort nicholas

-1

Ich dachte nur der Zuweisung einer handler unterstützt, um einen neuen namespace, d.h. einen Verweis auf eine unterstützte Veranstaltung. Der code unten funktioniert (einfügen in der Konsole von Chrome), aber Sie können schreiben Sie es in einem besseren format, und Sie sollten zusätzliche Hilfsmethoden (können neu definieren, sich selbst als gut), für xBrowser-Unterstützung, und für die sniffing-support-Arten (die, nachdem Sie haben erkannt, welcher Weg zu benutzen, müssen Sie die Funktion selbst neu definieren. Ich hoffe, ich habe unten hilft.

var de = document.documentElement || document.getElementsByTagName[0];

function all(){ console.log('all') };

var customEventForSomeSpecificElement = function customEventForSomeSpecificElement() {
    return ({
            customEvent: function() {
                if ('onclick' in de ) {
                    return 'click';
                }
            },
            init: function(){ return this.customEvent(); }
        }).init();
}();

de.addEventListener(customEventForSomeSpecificElement, all, false);

InformationsquelleAutor der Antwort WHill

-3

Es ist gar nicht so schwer - eigentlich gibt es nicht so viele event-Definitionen nur drei Versionen. Die erste ist die korrekte (addEventListener), dann gibt es den IE Weg (attachEvent) und dann gibt es noch die Kompatibilität Weise für ältere browser (element.onevent = function)

So dass eine vollständige event-handling-Lösung würde wie folgt Aussehen:

setEvent = function(element, eventName, handler){
  if('addEventListener' in element){
    //W3
    element.addEventListener(eventName,handler,false);
  }else if('attachEvent' in elm){
    //IE
    elm.attachEvent('on'+eventName,handler)
  }else{
    //compatibility
    elm['on'+eventName] = handler;
  }
}

und zu löschen events:

clearEvent = function(element, eventName, handler){
  if('removeEventListener' in element){
    //W3
    element.removeEventListener(eventName,handler,false);
  }else if('detachEvent' in elm){
    //IE
    elm.detachEvent('on'+eventName,handler)
  }else{
    //compatibility
    elm['on'+eventName] = null;
  }
}

und ein Beispiel:

setEvent(document, "click", function(){alert('hello world!');});
clearEvent(document, "click", function(){alert('hello world!');});

Dies ist nicht wirklich ein vollständiges Beispiel, aber da die Kompatibilität handler überschreibt immer die Vorherige Veranstaltungen (es ist nicht Anhängen Aktionen, die es überschreiben), so dass Sie wahrscheinlich möchte überprüfen, ob ein handler ist bereits festgelegt, und speichern Sie es dann in eine temporäre variable und das Feuer im inneren der event-handler-Funktion.

InformationsquelleAutor der Antwort Andris

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.