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

Question

我有一个事件侦听器，以及一个在单击时触发自定义事件的元素。 它们的设置如下：

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

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

假设我有一个定位标记（ <a href="#" data-target="customEventName"> ）触发了click事件，那么我该如何在监听器中获取该<a>标记及其属性？ 我想让对象解析任何其他data-属性。

Answer 1

解决方案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)]);
});

从文档 ：

.trigger( event [, extraParameters ] )

• 事件

  类型：事件

  jQuery.Event对象。

• extraParameters

  类型：数组或PlainObject

  传递给事件处理程序的其他参数。

JSFIDDLE

---

解决方案2：自定义事件

根据文档 ，您还可以创建一个自定义Event ，您可以在其中设置目标：

类别： Event对象

jQuery的事件系统根据W3C标准标准化事件对象。 确保将事件对象传递给事件处理程序。 将原始事件中的大多数属性复制并标准化为新事件对象。

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

Answer 2

您可以将其作为触发器中的参数传递：

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

$(document).on('click', '[data-action]', function(e) {
    e.preventDefault();
    $(document).trigger( $(this).attr('action'), [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 );
});