Javascript 筛选窗口上的事件与DOM节点上的单个事件

考虑以下代码示例：

import R from 'ramda';
import {Observable} from 'Rx';

var allClicks_ = Observable.fromEvent(window, 'click').share();

var getClicks = function(klass) {
  return allClicks_.filter(e => {
    return R.contains(klass, e.target.classList);
  });
};

getClicks('red').subscribe(x => {
  render('RED: ' + x.target.className);
});

getClicks('blue').subscribe(x => {
  render('BLUE: ' + x.target.className);
});

我没有将点击事件监听器添加到“.red”和“.blue”中，而是将事件监听器添加到

窗口

中，并过滤打开“.red”和“.blue”的事件

这样的代码会出什么问题？它是否比将事件侦听器添加到单个DOM节点更高效（或更低）？或者它没有性能优势

---

编辑：共享热可观察对象，以便只附加一个事件处理程序

这是委托事件处理程序的一个示例。这种模式非常有用。事实上，像

jQuery

和

dojo

这样的库对这种模式具有内置支持，这是非常有用的（请参见和的

selector

参数）

向每个DOM节点添加事件处理程序实际上是一个O（n）操作，而这是一个O（1）操作。随着匹配DOM节点数量的增加，委托事件处理程序模式实现了更大的好处

什么会出错

• 如果在顶级元素（本例中为

  窗口

  ）和目标元素之间附加了一个事件处理程序，并且该事件处理程序执行了

  ev.stopPropagation（）

  ，则您的委托处理程序将永远看不到该事件

• 如果您的过滤器功能过于复杂和缓慢，那么浏览器将不得不花费比平常更多的时间运行过滤器

• 添加事件处理程序后，将添加DOM节点的事件。这通常被视为一件好事。但如果出于某种原因，你没有预料到，那么它可能会把你扔出去

请注意，在您的特定示例中，实际上注册了两个

click

处理程序。您可以通过

share

将其简化为单个实例：

var allClicks_ = Observable.fromEvent(window, 'click').share();

---

感谢您与我们分享这个热门话题。我正在考虑创建一个小型应用程序，用这两种方法进行基准测试。但是……也许以后吧。