> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Handling

This guide covers the event callbacks available in Joyfill forms and when they're triggered.

### **Available Events**

| Event         | When Triggered         | Purpose                 |
| ------------- | ---------------------- | ----------------------- |
| onFieldChange | Field value changes    | Track form changes      |
| onFocus       | Field gains focus      | Handle field focus      |
| onBlur        | Field loses focus      | Handle field blur       |
| onUpload      | File upload requested  | Handle file uploads     |
| onCapture     | Barcode scan requested | Handle barcode scanning |

### **onFieldChange**

Triggered when any field value changes:

```kotlin theme={null}
Form(
    editor = rememberDocumentEditor(json),
    onFieldChange = { event ->
        println("Field '${event.fieldId}' changed")
        
        // Handle different event types
        when (event) {
            is ComponentEvent.FieldEvent -> {
                println("Regular field changed")
            }
            is ComponentEvent.CellEvent -> {
                println("Table cell changed in row: ${event.rowIds?.firstOrNull()}")
            }
        }
    }
)
```

### **onFocus**

Triggered when a field or a page gains focus:

```kotlin theme={null}
onFocus = { event ->
    println("Page focused: ${event.pageId}")
    println("Field focused: ${event.fieldId}")
    // Your focus handling logic here
}
```

### **onBlur**

Triggered when a field or a page loses focus:

```kotlin theme={null}
onBlur = { event ->
    println("Page lost focus: ${event.pageId}")
    println("Field lost focus: ${event.fieldId}")
    // Your blur handling logic here
}
```

### **onUpload**

Triggered when file upload is requested:

```kotlin theme={null}
onUpload = { event ->
    // Return list of URLs for uploaded files
    listOf("https://picsum.photos/200/300")
}
```

### **onCapture**

Triggered when barcode scanning is requested:

```kotlin theme={null}
onCapture = { event ->
    // Return scanned barcode value
    "123456789"
}
```

### **Event Properties**

All events provide context information:

```kotlin theme={null}
onFieldChange = { event ->
    println("Document ID: ${event.id}")
    println("Field ID: ${event.fieldId}")
    println("Field Title: ${event.source?.component?.title}")
    println("Page ID: ${event.pageId}")
}
```

**Note:** Events are not triggered when `mode = Mode.readonly`.