jQuery-获取特定类型的事件目标或父级的事件扩展

使用类似于的图示符库，按钮通常会以如下方式结束：

<button>
    <span class="fa fa-stack-overflow fa-lg"></span> Click me
</button>

$('button').on('click', function($event) {

    var $target = $($event.target);
    var $button = $target.is('button') ? $target : $target.closest('button');

    // useful stuff goes here
}

var $button = $.getSpecificTarget($event, 'button');

是否可以扩展jQuery事件对象来添加一个封装此功能的方法，以便可以像这样调用它

var $button = $event.getSpecificTarget('button');

我创建了一个示例来演示这个问题

这可以使用普通的jQuery插件来完成，但如果可以直接从事件对象而不是通过这样的插件来访问，则会感觉更干净：

<button>
    <span class="fa fa-stack-overflow fa-lg"></span> Click me
</button>

$('button').on('click', function($event) {

    var $target = $($event.target);
    var $button = $target.is('button') ? $target : $target.closest('button');

    // useful stuff goes here
}

var $button = $.getSpecificTarget($event, 'button');

---

您可以将事件绑定到文档，而不是您现在正在执行的操作

$(function () {

  $(document).on('click', 'button', function() {
    var button = $(this);
    $('#result').append(button.text() + '<br>');
  });
});

$（函数（）{
$（文档）。在（'单击'，'按钮'，函数（）上）{
var按钮=$（此按钮）；
$（“#结果”）.append（button.text（）+”
）；
});
});

请检查这个。
单击按钮本身或跨距时，您将看到

按钮的文本被追加到
div
。该键正在使用
$（this）


事实上，您可以保留现有的代码，并使用
$（this）
获取按钮。
有趣。。。使用您的方法，如果您单击event.target，它仍然是span，但是$（this）始终返回按钮，而不管您在哪里单击。我一直使用event.target而不是$（这个），因为我认为它更具可读性-我从来没有意识到有什么不同。我想，我应该读一下：