> Markdown version of [Listening to User Events](https://vaadin.com/docs/v10/flow/element-api/tutorial-event-listener). Section index: [llms.txt](https://vaadin.com/docs/v10/flow/llms.txt)

# Listening to User Events

To make an application interactive, you want to react to events from the user. For this, you can listen to any browser event using `addEventListener` in `Element`:

```java
Element helloButton = ElementFactory.createButton("Say hello");
helloButton.addEventListener("click", e -> {
    Element response = ElementFactory.createDiv("Hello!");
    getElement().appendChild(response);
});
getElement().appendChild(helloButton);
```

Clicking the "Say hello" button in the browser will now send the event to the server, where it is processed and a new "Hello!" element is added to the DOM.

## <a id="accessing-data-from-the-event"></a>Accessing Data From the Event

Sometimes you need more information about the element or the event which the user interacted with. You can get this by defining required event data on the `DomListenerRegistration` returned by `addEventListener`.

```java
helloButton.addEventListener("click", this::handleClick)
    .addEventData("event.shiftKey")
    .addEventData("element.offsetWidth");

private void handleClick(DomEvent event) {
    JsonObject eventData = event.getEventData();
    boolean shiftKey = eventData.getBoolean("event.shiftKey");
    double width = eventData.getNumber("element.offsetWidth");

    String text = "Shift " + (shiftKey ? "down" : "up");
    text += " on button whose width is " + width + "px";

    Element response = ElementFactory.createDiv(text);
    getElement().appendChild(response);
}
```

The requested event data values are sent as a JSON object from the client and made available through `event.getEventData()` in the listener. You should use the proper getter based on the data type. Also make sure you use the same keys that you provided as parameters to `addEventData`.

> **Tip:** The `filter` and `debounce` settings in `@DomEvent` that are described in [Using Events with Components](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-events.md) can also be set through the `DomListenerRegistration` object.