Events (conceptual)

[nbwedev]

Look up and study:

• What events are

• Event handlers (React vs JS)

[nbwedev]

Events are signals emitted by the browser when user interactions or browser actions occur, such as clicks, key presses, or page load.

Event handlers are functions registered to respond to specific events. When an event occurs, the corresponding handler runs and determines how the application should react, typically by updating state or triggering UI changes.”

---

Concrete mapping to your task manager

Example: “Complete task” button click

Event: click

1. Handler: onToggleTask
2. State change: update isCompleted in tasks array
3. UI update: re-render task list
4. The event itself does nothing—your handler defines meaning.

Rule of thumb (lock this in)

Events don’t change your app—handlers do.

---

EVENT HANDLING in PLAIN JAVASCRIPT

In plain JavaScript, event handling is explicit and imperative.
I select a DOM element, register an event listener using addEventListener, and provide a handler function that will be invoked when the browser emits the event.
The handler receives the native browser Event object and is responsible for interpreting the event and updating application state or the DOM directly.

Key characteristics:

. Direct attachment to DOM elements
. Native DOM event names (lowercase)
. Direct access to the native Event object
. Manual control over state updates and DOM manipulation

const form = document.getElementById('taskForm');

form.addEventListener('submit', function (event) {
  event.preventDefault(); // Stop browser page reload

  const input = document.getElementById('taskInput');
  const value = input.value;

  console.log('Task submitted:', value);

  // Application logic goes here:
  // update tasks array
  // re-render UI
});

Why this aligns with your model:

. The browser emits a submit event
. The handler intercepts it
. Default behavior (page reload) is canceled
. The app decides what to do instead

---

EVENT HANDLING in REACT

React abstracts DOM event handling through a Synthetic Event system.
Instead of attaching listeners directly to individual DOM nodes, React uses event delegation by attaching a small number of listeners at the root of the application.
Event handlers are declared declaratively via JSX attributes and receive a SyntheticEvent that normalizes browser indifferences while preserving native event interface.

Key characteristics:

. Declarative handler registration via JSX
. CamelCase event names
. SyntheticEvent wrapper for consistency
. Delegation managed by the framework
. State updates trigger re-renders instead of manual DOM changes

function TaskForm() {
  const handleSubmit = (event) => {
    event.preventDefault(); // Stops browser default behavior

    const value = event.target.elements.task.value;
    console.log('Task submitted:', value);

    // Update state → triggers re-render
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="task" />
      <button type="submit">Add task</button>
    </form>
  );
}

Key alignment points:

. event is a SyntheticEvent
. preventDefault() works the same
. You update state, not the DOM
. React handles the UI update

---

Rule of thumb to remember

Event handling is how my application responds to signals from the browser.
In plain JavaScript, I imperatively attach handlers to DOM elements and work with native events directly.
In React, event handling is abstracted through Synthetic Events and event delegation, allowing handlers to be declared declaratively while preserving the same underlying event-driven model.

Events are browser concerns. Handlers are application concerns.