基于类的DOM事件委托

Question

使用CSS，可以很容易地为共享同一个类的所有元素附加某种样式。我想做类似的事情，但对于DOM事件处理程序而不是样式。例如。我希望类my-class的所有元素都具有相同的点击事件处理程序。

我知道这可以在页面加载后使用选择器轻松完成，例如在jQuery中：

$('.my-class').click(function() {alert('clicked');})

但我想知道是否可以使用DOM事件委托来实现。 canonical answer表明委托可用于将事件从子节点传播到其父节点（或通常是祖先）。是否可以使用my-class在单个节点上定义处理程序，并将my-class的所有其他元素委托给它，即使它们不是后代？

Answer 1

虽然被认为是不好的做法（因为你通常应该委托给最近的静态祖先），你可以按如下方式委托给body元素：

$('body').on('click', '.my-class', function() {
    alert('clicked');
});

这当然会委托点击事件来处理文档my-class中body类的任何元素。

Answer 2

我们还可以在点击其他元素时触发事件：

$( "#other" ).click(function() {
  $( "#target" ).click();
});