Question

如何选择带有选择器的文档（JQuery，纯JavaScript等...）？

我想基于事件监听器触发事件，当用户在文档中的任何位置按下“Enter”键（13）时，该事件监听器会收听。

我正在使用此特定功能来收听我的应用中的所有事件：

export function listen(eventName, selector, handler) {
    document.body.addEventListener(eventName, event => {
        if(event.target.matches(selector)) {
            return handler(event);
        }
    });
}

Answer 1

你不需要选择器。您始终可以通过document引用它。

document.addEventListener("keypress", handler);

如果您想要HTML元素，可以使用"html"选择器。

document.querySelector("html").addEventListener(...)

或者只使用document.documentElement。

document.documentElement.addEventListener(...)

正如@cepharum所指出的那样，你可以通过将元素或选择器传递给$函数来对jQuery做同样的事情。

有关您更新的问题的一些注意事项，虽然document始终可用，document.body可能不会在正文完全加载之前。您应该可以使用document代替。

此外，您在事件处理程序中有一个return语句。那不会做任何有用的事情。返回值被忽略。

最后，如果用户在文档中的任何位置按下键时应该触发它，那么您似乎不希望将回调限制为匹配的选择器。这似乎就会干扰。

如果您希望进行基于选择器的事件委派，那么您几乎就在那里。您最有可能想要遍历event.target的父节点以查看哪些节点与选择器匹配，然后针对它们运行处理程序。

export function listen(eventName, selector, handler) {
    document.body.addEventListener(eventName, event => {
        var el = event.target;
        do {
          if (el.matches(selector)) {
            handler(event);
          }
        } while((el = el.parentNode));
    });
}

如果您只想在找到的第一个匹配项时触发，请在return调用后添加break或handler。

Answer 2

为了防止修改通用功能listen，我只是简单地使用了＆＃39; body＆＃39;作为选择者。

listen('keypress', 'body', event => {
  event.preventDefault();
  if (event.keyCode === 13) {
    const todoInput = document.getElementById('todoInput');
    todos.dispatch(addTodo(todoInput.value));
  }
});

文档的CSS选择器

2 个答案: