SyntaxShelf

Event listener

2 snippets across 2 stacks - JavaScript, React

JSJavaScript

Event Listeners

JS · DOM Manipulation
Syntax
element.addEventListener(event, handler, options)
element.removeEventListener(event, handler)
Example
const button = document.querySelector("#submit-btn");

function handleClick(event) {
  event.preventDefault();
  console.log("Button clicked!", event.target);
}

button.addEventListener("click", handleClick);

// One-time listener
button.addEventListener("click", () => {
  console.log("This fires only once");
}, { once: true });

Note The third argument can be a boolean (useCapture) or an options object { capture, once, passive, signal }. Use { once: true } for one-shot handlers.

REReact

Event Listeners

RE · useEffect
Syntax
useEffect(() => {
  const handler = (e) => { ... };
  window.addEventListener('event', handler);
  return () => window.removeEventListener('event', handler);
}, []);
Example
function WindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <p>{size.width} x {size.height}</p>;
}

Note Always remove event listeners in the cleanup to avoid duplicate handlers and memory leaks. The handler reference must be the same function for addEventListener and removeEventListener.

Frequently asked questions

How does JavaScript handle event listener?
This task is covered in 2 stacks on this page: JavaScript, React. The "Event Listeners" snippet in JavaScript uses `element.addEventListener(event, handler, options)`.
Which code does the JavaScript example use?
The "Event Listeners" snippet uses `element.addEventListener(event, handler, options)`, from the DOM Manipulation section of the JavaScript cheat sheet.
Which stacks cover "event listener" on this page?
JavaScript, React. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?
Yes. For "Event Listeners": The third argument can be a boolean (useCapture) or an options object { capture, once, passive, signal }. Use { once: true } for one-shot handlers.

Browse all tasks by intent