Event Parameters and Data

Often you need to pass additional data to event handlers beyond the event object itself. Let's explore patterns for handling data in events.

Passing Parameters to Handlers

There are several ways to pass data to event handlers:

Reading Event Data

Event handlers can read data from the event object:

Keyboard Events

Handling keyboard input with key information:

Data Attributes

Using data attributes to pass information:

Exercise: Parameter Passing

Exercise: Event Data Extraction

Exercise: Keyboard Handler

Key Takeaways

1. Arrow wrapper - onClick={() => handler(data)} for inline params
2. Handler factory - onClick={createHandler(data)} for reusable handlers
3. Event target - Access input values via event.target.value
4. Dataset - Use data-* attributes for custom data
5. Keyboard events - Check key, ctrlKey, shiftKey, etc.