如何使用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对象.

• extraParameters

  键入:Array或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