javascript - 如何使用 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参数作为triggerjQuery 函数的第二个参数。

$(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 对象。

• 额外参数

  类型：数组或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 );
});