Wie man am target-element mit jQuery event listener?

Ich habe einen Ereignis-listener, und ein element, das löst ein benutzerdefiniertes Ereignis " beim klicken. Sie sind wie folgt eingerichtet:

$(document).on('customEventName', function(e) {
    //do something
});

$(document).on('click', '[data-action]', function(e) {
    e.preventDefault();
    $(document).trigger( $(this).attr('action') );
});

Sagen, ich habe eine anchor-tag (<a href="#" data-target="customEventName">) auslösen, die click Fall, wie würde ich dann an die <a> tag und seine Eigenschaften in meiner Zuhörer? Ich bin zu wollen, um auf das Objekt zu analysieren, zusätzliche data- Attribute.

  • Wenig verwirrt, scheint, Sie sind bereits mit this Sie möchten, übergeben Sie die Instanz von this auf Ihre benutzerdefinierten listener?
  • Im Grunde, ja.
InformationsquelleAutor Martin Bean | 2013-08-01
  1. 5

    Lösung 1: extraParameters

    Verwenden extraParamters parameter als zweites argument von trigger jQuery-Funktion.

    $(document).on('customEventName', function(e, dataActionElement) {
    //do something
});

$(document).on('click', '[data-action]', function(e) {
    e.preventDefault();
    $(document).trigger($(this).attr('action'), [$(this)]);
});

    Vom Dokumentation:

    .trigger( event [, extraParameters ] )

    • Veranstaltung

      Typ: Veranstaltung

      JQuery.Event-Objekt.

    • extraParameters

      Typ: Array oder PlainObject

      Zusätzliche Parameter zu übergeben, zusammen, um den event-handler.

    JSFIDDLE

    Lösung 2: benutzerdefinierte Ereignisse

    Laut Dokumentation, können Sie auch erstellen Sie eine benutzerdefinierte Event dem Sie festlegen können, das Ziel:

    Kategorie: Event Objekt

    jQuery-event-system normalisiert das event-Objekt gemäß der W3C-standards. Das event-Objekt ist garantiert an den Ereignishandler übergeben. Die meisten Eigenschaften aus der ursprünglichen Veranstaltung sind, kopiert und normalisiert, um ein neues Ereignis-Objekt.

    $(document).on('customEventName', function(e) {
    //e.target is clicked element sent using customEvent
    //do something
});

$(document).on('click', '[data-action]', function(e) {
    var customEvent = $.Event($(this).attr('action'), {target: this }) 
    $(document).trigger(customEvent);
});

    JSFIDDLE

    • Dies ist ein bisschen das, was ich bin nach, aber ich dachte, ich wäre in der Lage, den Zugriff auf die Anrufer in .on('customEventName') im e parameter ohne pass-der Aufrufer-Objekt als zusätzlichen parameter?
    • Warum würden Sie das tun? Ich sehe keinen Grund dafür, denn diese Lösung ist auch einfach.
    • Es scheint der einzige Weg zu sein, zu verwenden einen Ereignis-listener. Etwas löst ein Ereignis aus, die Sie dann befragen Sie die Anrufer in der listener?
    • Aktualisiert meine Antwort. Hinzugefügt Inhalt.
    • Ist es jetzt ok?
    InformationsquelleAutor Ionică Bizău
  2. 1

    Könnten Sie übergeben Sie es als parameter im trigger:

    $(document).on('customEventName', function(e, target) {
    //do something
});

$(document).on('click', '[data-action]', function(e) {
    e.preventDefault();
    $(document).trigger( $(this).attr('action'), [this] );
});

    könnte man auch versuchen, so etwas wie dieses:

    $(document).on('customEventName', function(e) {
    var target = e.target;
    //do something
});

$(document).on('click', '[data-action]', function(e) {
    e.preventDefault();
    var customEvent = $.Event($(this).data('action'), { target: this });
    $(document).trigger( customEvent );
});
    InformationsquelleAutor kalley
Schreibe einen Kommentar