Event Handling in Blazor

Common Events

Blazor uses the @ prefix to handle browser events, such as button clicks and text changes.

<button @onclick="HandleClick">Click me</button>
<input @onchange="HandleChange" />
<div @onmouseover="HandleMouseOver">Hover me</div>

@code {
    private void HandleClick()
    {
        Console.WriteLine("Button clicked!");
    }

    private void HandleChange(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString();
        Console.WriteLine($"Value changed to: {newValue}");
    }

    private void HandleMouseOver()
    {
        Console.WriteLine("Mouse over event!");
    }
}

Event Arguments

Events can receive event arguments for additional information:

<button @onclick="@((e) => HandleClickWithArgs(e))">Click with args</button>

@code {
    private void HandleClickWithArgs(MouseEventArgs e)
    {
        Console.WriteLine($"Mouse position: {e.ClientX}, {e.ClientY}");
    }
}

EventCallback

Blazor allows event communication between parent and child components using EventCallback. This enables components to notify their parents about events.

Child Component

<button @onclick="OnClick">Click me</button>

@code {
    [Parameter]
    public EventCallback OnClick { get; set; }
}

Parent Component

<ChildComponent OnClick="HandleChildClick" />

@code {
    private void HandleChildClick()
    {
        Console.WriteLine("The child component's button was clicked");
    }
}

EventCallback with Parameters

You can pass data from child to parent using EventCallback<T>:

// Child Component
<button @onclick="@(() => OnValueChange.InvokeAsync(42))">Send Value</button>

@code {
    [Parameter]
    public EventCallback<int> OnValueChange { get; set; }
}

// Parent Component
<ChildComponent OnValueChange="@HandleValueChange" />

@code {
    private void HandleValueChange(int value)
    {
        Console.WriteLine($"Received value: {value}");
    }
}

Preventing Default Actions

Use @onclick:preventDefault to prevent default browser behavior:

<a @onclick="HandleClick" @onclick:preventDefault href="#">
    Click me without navigation
</a>

Stop Event Propagation

Use @onclick:stopPropagation to prevent event bubbling:

<div @onclick="HandleDivClick">
    <button @onclick="HandleButtonClick" @onclick:stopPropagation>
        Click me
    </button>
</div>