事件侦听器回调在另一个事件侦听器的回调中设置时立即触发。 ReactJS

Question

With a create-react-app boilerplate setup, I have an input field with an onFocus event passed. Within this onFocus callback I'm setting a click eventlistener on window.document.

When the input field is focused why does the clickHandler callback fire immediately?

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

When you click on the input, few events occur such as mousedown , mouseup , focus click . (fyi - click happens when a mousedown and mouseup event occur on the same element). In chrome,focus handler is executed first and then the click handler is executed (if the handlers exist).

Now, in your code when you click on the input, focusHandler is executed where a click handler is attached to the window . By the time the js engine finishes the execution of focusHandler , there is a click handler registered already. So as soon as focusHandler is executed, the js engine realises that 'ah, there is a clickHandler that I need to execute it. Let me do it' . Hence your clickHandler fires immediately.

You can test it by attaching event handler in a setTimeout . In below code, js engine has no clickHandler to execute after focusHandler execution is finished. So click handler won't fire immediately.

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