I have an event listener, and an element that triggers a custom event on click. They’re set up as follows:

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

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

Say I have an anchor tag (<a href="#" data-target="customEventName">) trigger the click event, how would I then get at that <a> tag and its properties in my listener? I’m wanting to get at the object to parse any additional data- attributes.

I have an event listener, and an element that triggers a custom event on click. They’re set up as follows:

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

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

Say I have an anchor tag (<a href="#" data-target="customEventName">) trigger the click event, how would I then get at that <a> tag and its properties in my listener? I’m wanting to get at the object to parse any additional data- attributes.

• javascript
• jquery
• events

• Little confused, seems you're already using this, you want to pass the instance of this onto your custom listener? – tymeJV Commented Aug 1, 2013 at 15:36

2 Answers 2

Solution 1: extraParameters

Use extraParamters parameter as second argument of trigger jQuery function.

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

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

From documentation:

.trigger( event [, extraParameters ] )

• event

  Type: Event

  A jQuery.Event object.

• extraParameters

  Type: Array or PlainObject

  Additional parameters to pass along to the event handler.

JSFIDDLE

Solution 2: custom events

According to documentation, you also can create a custom Event where you can set the target:

Category: Event Object

jQuery’s event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.

$(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

You could pass it as a parameter in trigger:

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

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

you could also try something like this:

$(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 );
});