javascript - 如何使用 jQuery 事件监听器获取目标元素？

Question

我有一个事件监听器和一个在单击时触发自定义事件的元素。它们的设置如下:

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

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

假设我有一个 anchor 标签(<a href="#" data-target="customEventName">)触发click事件，我将如何获得那个 <a>我的监听器中的标记及其属性？我想获取对象以解析任何额外的 data-属性。

Answer 1

解决方案一:extraParameters

使用 extraParamters 参数作为 trigger jQuery 函数的第二个参数。

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

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

来自 documentation :

.trigger( 事件 [, extraParameters ] )

• 事件

  Type: Event

  A jQuery.Event object.

• 额外参数

  Type: Array or PlainObject

  Additional parameters to pass along to the event handler.

JSFIDDLE

---

方案二:自定义事件

根据 documentation ，您还可以创建自定义 Event，您可以在其中设置目标:

类别:事件对象

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