Question

我正在尝试将jquery作为原型的javascript库。现在谈到原型中的事件委托我可以做到以下几点：

  $('wrapper').observe('click', function(event) {
        var foo = Event.findElement(event, '.foo1');
        if (foo) // do something 

        var bar = Event.findElement(event, '.bar1');
        if (bar) // do something else
    });

所以这意味着只有一个点击处理程序放在文档上。

我知道jquery有live / delegate方法，但似乎你需要在调用中提供选择器（除非我弄错了？）。是否有类似的方法只有一个点击处理程序并做类似的事情？或者将它们拆分为单独的事件会更好吗？

由于

Answer 1

我觉得分开它们会更清洁一些。当你看结果时，它更清洁/更容易维护。这是.delegate()的样子：

$('#wrapper').delegate('.foo1', 'click', function(event) {
  // do something for .foo1 
})).delegate('.bar1', 'click', function(event) {
  // do something for .bar1
});

要回答“是”的问题，您可以拥有一个处理程序，例如：

$('#wrapper').delegate('.bar1, .foo1', 'click', function(event) {
  if($(this).is('.foo1') // do something for .foo1 
  if($(this).is('.bar1') // do something for .bar1 
});

还有其他近似方法，例如使用.click()和$.contains()。但是这个方法和其他方法效率较低，维护起来有点困难，至少对我来说，你可以决定什么是最好的，但在这种情况下我个人会选择2个处理程序。

Answer 2

我正在尝试在jQuery中复制你的例子（注意：正如尼克在评论中指出的那样，这可能不适用于你想要的所有情况。尼克的回答显示了一个更好的方法与jQuery的.delegate（）。）：

$('#wrapper')
  .bind(
    'click',
    function(e)
    {
      if($(e.target).is('.foo1'))
      {
        // do something with $(e.target)
      }
      else if($(e.target).is('.bar1'))
      {
        // do something with $(e.target)
      }
    }
  );

原型到jquery事件委托

2 个答案: