如何使用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)]);
});

来自documentation：

.trigger( event [, extraParameters ] )

• 事件

    

  输入：事件

       

  jQuery.Event对象。

• extraParameters

    

  类型：Array或PlainObject

       

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

JSFIDDLE

---

解决方案2：自定义事件

根据documentation，您还可以创建自定义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 );
});