文檔選擇器

如何使用選擇器（JQuery，普通JavaScript等）來選擇文檔？文檔選擇器

我想要觸發一個基於事件監聽器的事件，該事件監聽器監聽用戶在文檔中的任意位置按下「Enter」（13）鍵。

我使用這個特定的功能來聽我的應用程序的所有事件：

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

來源

2017-08-26 dbrrt

你並不需要一個選擇。你總是通過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)); 
    }); 
}

如果你只希望它火找到的第一個比賽，該handler調用之後添加return或break。

來源

2017-08-26 22:51:41 spanky

或者在使用jQuery時使用'$（document）.on（「click」，handler）''。 – cepharum

我編輯了我的問題，不是我想要做的，但是無論如何感謝 – dbrrt

@dbrrt：不確定你的意思。好像你想要在'document'的任何地方捕獲這個事件。爲什麼你認爲你需要一個選擇器？你真的想做一個類似jQuery的授權嗎？如果是這樣，那也有一個答案，但是你需要提供你真正想要的細節。 – spanky

爲了防止修改通用函數listen，我只是使用'body'作爲選擇器。

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

來源

2017-08-26 23:14:43 dbrrt

回答

相關問題