事件偵聽器回調在另一個事件偵聽器的回調中設置時立即觸發。 ReactJS

Question

通過 create-react-app 樣板設置，我有一個傳遞了 onFocus 事件的輸入字段。 在這個 onFocus 回調中，我在 window.document 上設置了一個點擊事件監聽器。

當輸入字段被聚焦時，為什么 clickHandler 回調會立即觸發？

function App() {

  const clickHandler = (e) => {
      console.log("clicked");
      window.document.removeEventListener("click", clickHandler)
  } 

  const focusHandler = (e) => {
      console.log('onFocus');
      e.stopPropagation()
      window.document.addEventListener("click", clickHandler)  
  }

  return (
   <div className="App">
          <input onFocus={focusHandler} />
    </div>
  );

Answer 1

當您單擊輸入時，會發生一些事件，例如mousedown 、 mouseup 、 focus click 。 （僅供參考 - 當同一元素上發生 mousedown 和 mouseup 事件時發生單擊）。 在 chrome 中，首先執行焦點處理程序，然后執行單擊處理程序（如果處理程序存在）。

現在，在您的代碼中，當您單擊輸入時，將執行focusHandler ，其中單擊處理程序附加到window 。 當 js 引擎完成focusHandler的執行時，已經注冊了一個點擊處理程序。 所以一旦執行了focusHandler ，js引擎就會意識到‘啊，有一個clickHandler我需要執行它。 讓我做吧' 。 因此，您的 clickHandler 會立即觸發。

您可以通過在setTimeout中附加事件處理程序來測試它。 在下面的代碼中，js引擎在focusHandler執行完成后沒有clickHandler執行。 所以點擊處理程序不會立即觸發。

const focusHandler = e => {
    console.log("onFocus");
    e.stopPropagation();
    setTimeout(() => window.addEventListener("click", clickHandler), 1000);
  };