penanganan peristiwa ASP.NET Core Blazor

Artikel ini menjelaskan Blazor fitur penanganan peristiwa, termasuk tipe argumen peristiwa, panggilan balik peristiwa, dan mengelola peristiwa browser default.

Mendelegasikan penanganan aktivitas

Tentukan penangan acara delegasi dalam markup komponen Razor dengan sintaks @on{DOM EVENT}="{DELEGATE}"Razor.

• Tempat {DOM EVENT} penampung adalah peristiwa DOM (misalnya, click).
• Tempat {DELEGATE} penampung adalah penanganan aktivitas delegasi C#.

Untuk penanganan peristiwa:

• Mendelegasikan penanganan aktivitas dalam Blazor Web Apps hanya dipanggil dalam komponen yang mengadopsi mode render interaktif. Contoh di seluruh artikel ini mengasumsikan bahwa aplikasi mengadopsi mode render interaktif secara global di komponen root aplikasi, biasanya App komponen. Untuk informasi selengkapnya, lihat Blazor render ASP.NET Core.
• Penangan aktivitas delegasi asinkron yang mengembalikan Task (async Task) didukung oleh Blazor dan diadopsi oleh Blazor Web AppBlazor WebAssembly dan contoh dokumentasi.
• Mendelegasikan penanganan aktivitas secara otomatis memicu render UI, sehingga tidak perlu memanggil StateHasChangedsecara manual .
• Pengecualian dicatat.

Penting

Kerangka kerja Blazor tidak melacak metode asinkron yang mengembalikan void (async). Akibatnya, seluruh proses gagal ketika pengecualian tidak tertangkap jika void dikembalikan. Selalu kembalikan Task/ValueTask dari metode asinkron.

Kode berikut:

• Memanggil metode UpdateHeading ketika tombol dipilih di dalam antarmuka pengguna (UI).
• CheckChanged Memanggil metode saat kotak centang diubah di UI.

EventHandler1.razor:

@page "/event-handler-1"

<PageTitle>Event Handler 1</PageTitle>

<h1>Event Handler Example 1</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading() => headingValue = $"New heading ({DateTime.Now})";

    private void CheckChanged() => checkedMessage = $"Last change {DateTime.Now}";
}

Dalam contoh berikut, UpdateHeading:

• Dipanggil secara asinkron ketika tombol dipilih.
• Menunggu dua detik sebelum memperbarui judul.

EventHandler2.razor:

@page "/event-handler-2"

<PageTitle>Event Handler 2</PageTitle>

<h1>Event Handler Example 2</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string headingValue = "Initial heading";

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }
}

Argumen peristiwa bawaan

Untuk peristiwa yang mendukung jenis argumen peristiwa, menentukan parameter peristiwa dalam definisi metode peristiwa hanya diperlukan jika jenis peristiwa digunakan dalam metode . Dalam contoh berikut, MouseEventArgs digunakan dalam ReportPointerLocation metode untuk mengatur teks pesan yang melaporkan koordinat mouse saat pengguna memilih tombol di UI.

EventHandler3.razor:

@page "/event-handler-3"

<PageTitle>Event Handler 3</PageTitle>

<h1>Event Handler Example 3</h1>

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e) => 
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
}

Hal-hal yang didukung EventArgs diperlihatkan dalam tabel berikut.

Kejadian	Kelas	Catatan DOM
Clipboard	ClipboardEventArgs
Tarik	DragEventArgs	DataTransfer dan DataTransferItem menampung data item yang diseret. Terapkan drag and drop pada aplikasi Blazor menggunakan JS interop dengan HTML Drag and Drop API.
Kesalahan	ErrorEventArgs
Kejadian	EventArgs	EventHandlers menyimpan atribut untuk mengonfigurasi pemetaan antara nama peristiwa dan jenis argumen peristiwa.
Fokus	FocusEventArgs	Tidak menyertakan dukungan untuk relatedTarget.
Masukan	ChangeEventArgs
Papan Ketik	KeyboardEventArgs
Tikus	MouseEventArgs
Penunjuk mouse	PointerEventArgs
Roda mouse	WheelEventArgs
Progres	ProgressEventArgs
Sentuh	TouchEventArgs	TouchPoint mewakili satu titik kontak pada perangkat sensitif sentuhan.

Untuk informasi selengkapnya, lihat sumber daya berikut:

• EventArgs kelas di sumber referensi ASP.NET Core (cabang dotnet/aspnetcore main )

  Catatan

  Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

• EventHandlers menyimpan atribut untuk mengonfigurasi pemetaan antara nama peristiwa dan jenis argumen peristiwa.

Argumen peristiwa kustom

Blazor mendukung argumen peristiwa kustom, yang memungkinkan Anda meneruskan data arbitrer ke penanganan aktivitas .NET dengan peristiwa kustom.

Konfigurasi umum

Peristiwa kustom dengan argumen peristiwa kustom umumnya diaktifkan dengan langkah-langkah berikut.

Di JavaScript, tentukan fungsi untuk membuat objek argumen peristiwa kustom dari peristiwa sumber:

function eventArgsCreator(event) { 
  return {
    customProperty1: 'any value for property 1',
    customProperty2: event.srcElement.id
  };
}

Parameternya event adalah Peristiwa DOM.

Daftarkan event kustom dengan pengendali yang disebutkan sebelumnya di penginisialisasi JavaScript. Berikan nama peristiwa browser yang sesuai ke browserEventName, yang untuk contoh yang ditunjukkan di bagian ini adalah click untuk pilihan tombol di UI.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js {PACKAGE ID/ASSEMBLY NAME}(tempat penampung adalah ID paket atau nama rakitan aplikasi):

Blazor Web AppUntuk :

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

Untuk aplikasi Blazor Server atau Blazor WebAssembly :

export function afterStarted(blazor) {
  blazor.registerCustomEventType('customevent', {
    browserEventName: 'click',
    createEventArgs: eventArgsCreator
  });
}

Panggilan ke registerCustomEventType dilakukan dalam skrip hanya sekali per peristiwa.

Untuk panggilan ke registerCustomEventType, gunakan parameter blazor (huruf kecil b) yang disediakan oleh peristiwa mulai Blazor. Meskipun registrasi valid saat menggunakan objek Blazor (huruf besar B), pendekatan yang disukai adalah menggunakan parameter.

Nama acara kustom, customevent dalam contoh sebelumnya, tidak boleh cocok dengan nama acara yang dicadangkan Blazor. Nama yang dipesan dapat ditemukan di Blazor sumber referensi kerangka kerja (lihat panggilan ke fungsi registerBuiltInEventType).

Catatan

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Tentukan kelas untuk argumen peristiwa:

namespace BlazorSample.CustomEvents;

public class CustomEventArgs : EventArgs
{
    public string? CustomProperty1 {get; set;}
    public string? CustomProperty2 {get; set;}
}

Hubungkan acara kustom dengan argumen acara dengan menambahkan anotasi atribut [EventHandler] untuk acara kustom.

• Agar pengkompilasi menemukan [EventHandler] kelas , itu harus ditempatkan ke dalam file kelas C# (.cs), menjadikannya kelas tingkat atas normal.
• Tandai kelas public.
• Kelas tidak memerlukan anggota.
• Kelas .
• Tempatkan kelas di bawah namespace khusus untuk aplikasi Anda.
• Impor namespace ke Razor komponen (.razor) tempat peristiwa digunakan.

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustomevent", typeof(CustomEventArgs),
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

Daftarkan penanganan aktivitas pada satu atau beberapa elemen HTML. Akses data yang diteruskan dari JavaScript dalam metode penanganan delegasi.

@using BlazorSample.CustomEvents

<button id="buttonId" @oncustomevent="HandleCustomEvent">Handle</button>

@if (!string.IsNullOrEmpty(propVal1) && !string.IsNullOrEmpty(propVal2))
{
    <ul>
        <li>propVal1: @propVal1</li>
        <li>propVal2: @propVal2</li>
    </ul>
}

@code
{
    private string? propVal1;
    private string? propVal2;

    private void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        propVal1 = eventArgs.CustomProperty1;
        propVal2 = eventArgs.CustomProperty2;
    }
}

Jika atribut @oncustomevent tidak dikenali oleh IntelliSense, pastikan bahwa komponen tersebut atau berkas _Imports.razor mengandung pernyataan @using untuk namespace yang mencakup kelas EventHandler.

Setiap kali peristiwa kustom diaktifkan di DOM, penanganan aktivitas dipanggil dengan data yang diteruskan dari JavaScript.

Jika Anda mencoba mengaktifkan peristiwa kustom, bubbles harus diaktifkan dengan mengatur nilainya ke true. Jika tidak, peristiwa tidak mencapai Blazor handler untuk diproses ke kelas atribut[EventHandler] C#. Untuk informasi selengkapnya, lihat MDN Web Docs: Penggelembungan peristiwa.

Contoh peristiwa tempel clipboard kustom

Contoh berikut menerima peristiwa tempel clipboard kustom yang menyertakan waktu tempel dan teks yang ditempelkan pengguna.

Deklarasikan nama kustom (oncustompaste) untuk peristiwa dan kelas .NET (CustomPasteEventArgs) untuk menyimpan argumen peristiwa untuk peristiwa ini:

CustomEvents.cs:

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

[EventHandler("oncustompaste", typeof(CustomPasteEventArgs), 
    enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers
{
}

public class CustomPasteEventArgs : EventArgs
{
    public DateTime EventTimestamp { get; set; }
    public string? PastedData { get; set; }
}

Tambahkan kode JavaScript untuk menyediakan data untuk EventArgs subkelas dengan handler sebelumnya di penginisialisasi JavaScript. Contoh berikut hanya menangani penempelan teks, tetapi Anda dapat menggunakan API JavaScript arbitrer untuk menangani pengguna yang menempelkan jenis data lain, seperti gambar.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js:

Blazor Web AppUntuk :

export function afterWebStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

Untuk aplikasi Blazor Server atau Blazor WebAssembly :

export function afterStarted(blazor) {
  blazor.registerCustomEventType('custompaste', {
    browserEventName: 'paste',
    createEventArgs: event => {
      return {
        eventTimestamp: new Date(),
        pastedData: event.clipboardData.getData('text')
      };
    }
  });
}

Dalam contoh sebelumnya, placeholder {PACKAGE ID/ASSEMBLY NAME} dari namafile mewakili ID paket atau nama rakitan aplikasi.

Catatan

Untuk panggilan ke registerCustomEventType, gunakan parameter blazor (huruf kecil b) yang disediakan oleh peristiwa mulai Blazor. Meskipun registrasi valid saat menggunakan objek Blazor (huruf besar B), pendekatan yang disukai adalah menggunakan parameter.

Kode sebelumnya memberi tahu browser bahwa ketika peristiwa asli paste terjadi:

• Ajukan custompaste acara.
• Berikan data argumen peristiwa menggunakan logika kustom yang dinyatakan:
  • Untuk eventTimestamp, buat tanggal baru.
  • Untuk pastedData, ambil data clipboard sebagai teks. Untuk informasi selengkapnya, lihat MDN Web Docs: ClipboardEvent.clipboardData.

Konvensi nama peristiwa berbeda antara .NET dan JavaScript:

• Di .NET, nama peristiwa diawali dengan "on".
• Di JavaScript, nama peristiwa tidak memiliki awalan.

Dalam Razor komponen, pasang handler kustom ke elemen.

CustomPasteArguments.razor:

@page "/custom-paste-arguments"
@using BlazorSample.CustomEvents

<label>
    Try pasting into the following text box:
    <input @oncustompaste="HandleCustomPaste" />
</label>

<p>
    @message
</p>

@code {
    private string? message;

    private void HandleCustomPaste(CustomPasteEventArgs eventArgs)
    {
        message = $"At {eventArgs.EventTimestamp.ToShortTimeString()}, " +
            $"you pasted: {eventArgs.PastedData}";
    }
}

Ekspresi Lambda

Lambda expressions didukung sebagai penangan peristiwa delegasi.

EventHandler4.razor:

@page "/event-handler-4"

<PageTitle>Event Handler 4</PageTitle>

<h1>Event Handler Example 4</h1>

<h2>@heading</h2>

<p>
    <button @onclick="@(e => heading = "New heading!!!")">
        Update heading
    </button>
</p>

@code {
    private string heading = "Initial heading";
}

Seringkali lebih mudah untuk menutup nilai tambahan menggunakan parameter metode C#, seperti saat melakukan iterasi pada sekumpulan elemen. Contoh berikut membuat tiga tombol, yang masing-masing memanggil UpdateHeading dan meneruskan data berikut:

• Argumen peristiwa (MouseEventArgs) di e.
• Nomor tombol di buttonNumber.

EventHandler5.razor:

@page "/event-handler-5"

<PageTitle>Event Handler 5</PageTitle>

<h1>Event Handler Example 5</h1>

<h2>@heading</h2>

@for (var i = 1; i < 4; i++)
{
    var buttonNumber = i;

    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@i
        </button>
    </p>
}

@code {
    private string heading = "Select a button to learn its position";

    private void UpdateHeading(MouseEventArgs e, int buttonNumber) => 
        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
}

Membuat sejumlah besar delegasi peristiwa dalam perulangan dapat menyebabkan performa penyajian yang buruk. Untuk informasi selengkapnya, lihat praktik terbaik performa penyajian inti Blazor ASP.NET.

Hindari menggunakan variabel loop langsung dalam ekspresi lambda, seperti i dalam contoh perulangan sebelumnya for . Jika tidak, semua ekspresi lambda menggunakan variabel yang sama, sehingga nilai yang sama digunakan di semua lambda. Ambil nilai variabel dalam variabel lokal. Dalam contoh sebelumnya:

• Variabel i perulangan ditetapkan ke buttonNumber.
• buttonNumber digunakan dalam ekspresi lambda.

Atau, gunakan perulangan foreach dengan Enumerable.Range, yang tidak menghadapi masalah yang sama seperti sebelumnya.

@foreach (var buttonNumber in Enumerable.Range(1, 3))
{
    <p>
        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
            Button #@buttonNumber
        </button>
    </p>
}

EventCallback

Skenario umum dengan komponen berlapis adalah menjalankan metode dalam komponen induk saat peristiwa komponen anak terjadi. Peristiwa onclick yang terjadi pada komponen anak adalah kasus penggunaan umum. Untuk mengekspos peristiwa di seluruh komponen, gunakan EventCallback. Komponen induk dapat menetapkan metode panggilan balik ke komponen anak EventCallback.

Komponen berikut Child menunjukkan bagaimana handler tombol onclick disiapkan untuk menerima EventCallback delegasi dari sampel ParentComponent. Diketik menggunakan EventCallback dengan MouseEventArgs, yang sesuai untuk kejadian onclick dari perangkat periferal.

Child.razor:

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}

Komponen induk mengatur anak EventCallback<TValue> (OnClickCallback) ke metodenya ShowMessage .

ParentChild.razor:

@page "/parent-child"

<PageTitle>Parent Child</PageTitle>

<h1>Parent Child Example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e) => 
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
}

Saat tombol dipilih di ChildComponent:

• Metode Parent komponen ShowMessage dipanggil. message diperbarui dan ditampilkan dalam komponen Parent.
• Panggilan ke StateHasChanged tidak diperlukan dalam metode panggilan balik (ShowMessage). StateHasChanged dipanggil secara otomatis untuk merender ulang komponen Parent, sama seperti peristiwa anak yang memicu perenderan ulang komponen dalam penanganan peristiwa yang dijalankan di dalam anak. Untuk informasi lebih lanjut, lihat perenderan komponen Razor ASP.NET Core.

Gunakan EventCallback dan EventCallback<TValue> untuk penanganan peristiwa dan parameter komponen pengikatan.

Lebih suka yang ditik EventCallback<TValue> dengan kuat daripada EventCallback. EventCallback<TValue> memberikan umpan balik kesalahan yang ditingkatkan ketika jenis yang tidak pantas digunakan, memandu pengguna komponen menuju implementasi yang benar. Mirip dengan penanganan aktivitas UI lainnya, menentukan parameter peristiwa bersifat opsional. Gunakan EventCallback saat tidak ada nilai yang diteruskan ke panggilan balik.

EventCallback dan EventCallback<TValue> mengizinkan delegasi asinkron. EventCallback ditik dengan lemah dan memungkinkan melewati argumen jenis apa pun di InvokeAsync(Object). EventCallback<TValue> bertipe kuat dan memerlukan argumen T dalam InvokeAsync(T) yang dapat ditetapkan sebagai TValue.

Panggil EventCallback atau EventCallback<TValue> dengan InvokeAsync dan tunggu Task:

await OnClickCallback.InvokeAsync({ARGUMENT});

Dalam contoh sebelumnya, {ARGUMENT} tempat penampung (placeholder) adalah argumen opsional.

Contoh induk-anak berikut menunjukkan teknik.

Child2.razor:

<h3>Child2 Component</h3>

<button @onclick="TriggerEvent">Click Me</button>

@code {
    [Parameter]
    public EventCallback<string> OnClickCallback { get; set; }

    private async Task TriggerEvent()
    {
        await OnClickCallback.InvokeAsync("Blaze It!");
    }
}

ParentChild2.razor:

@page "/parent-child-2"

<PageTitle>Parent Child 2</PageTitle>

<h1>Parent Child 2 Example</h1>

<div>
    <Child2 OnClickCallback="(value) => { message1 = value; }" />
    @message1
</div>

<div>
    <Child2 OnClickCallback=
        "async (value) => { await Task.Delay(2000); message2 = value; }" /> 
    @message2
</div>

@code {
    private string message1 = string.Empty;
    private string message2 = string.Empty;
}

Penggunaan kedua komponen Child2 menunjukkan panggilan balik asinkron, dan nilai baru message2 ditetapkan serta dirender dengan penundaan dua detik.

Mencegah tindakan default

Gunakan atribut direktif @on{DOM EVENT}:preventDefault untuk mencegah tindakan default pada sebuah event, di mana {DOM EVENT} adalah penampung sebuah event DOM.

Saat kunci dipilih pada perangkat input dan fokus elemen ada pada kotak teks, browser biasanya menampilkan karakter kunci dalam kotak teks. Dalam contoh berikut, perilaku default dicegah dengan menentukan atribut direktif @onkeydown:preventDefault . Ketika elemen <input> dalam fokus, penghitung naik dengan urutan tombol Shift++. Karakter + tidak ditetapkan ke <input> nilai elemen. Untuk informasi selengkapnya tentang keydown, lihat MDN Web Docs: Document: keydown peristiwa.

EventHandler6.razor:

@page "/event-handler-6"

<PageTitle>Event Handler 6</PageTitle>

<h1>Event Handler Example 6</h1>

<p>For this example, give the <code><input></code> focus.</p>

<p>
    <label>
        Count of '+' key presses: 
        <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
    </label>
</p>

@code {
    private int count = 0;

    private void KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "+")
        {
            count++;
        }
    }
}

Menentukan atribut @on{DOM EVENT}:preventDefault tanpa nilai setara dengan @on{DOM EVENT}:preventDefault="true".

Ekspresi juga merupakan nilai atribut yang diizinkan. Dalam contoh berikut, shouldPreventDefault adalah bidang yang bool diatur ke atau truefalse:

<input @onkeydown:preventDefault="shouldPreventDefault" />

...

@code {
    private bool shouldPreventDefault = true;
}

Menghentikan penyebaran peristiwa

Gunakan atribut direktif @on{DOM EVENT}:stopPropagation untuk menghentikan penyebaran peristiwa dalam Blazor cakupan. {DOM EVENT} adalah tempat penampung untuk peristiwa DOM.

Efek stopPropagation atribut direktif terbatas pada Blazor cakupan dan tidak meluas ke HTML DOM. Peristiwa harus disebarluaskan ke root HTML DOM sebelum Blazor dapat bertindak atasnya. Untuk mekanisme untuk mencegah penyebaran peristiwa HTML DOM, pertimbangkan pendekatan berikut:

• Dapatkan jalur peristiwa dengan memanggil Event.composedPath().
• Memfilter peristiwa berdasarkan target peristiwa yang disusun (EventTarget).

Dalam contoh berikut, memilih kotak centang mencegah peristiwa klik dari anak <div> kedua menyebar ke induk <div>. Karena event klik yang dipropagasikan biasanya menjalankan metode OnSelectParentDiv, memilih elemen kedua <div> menghasilkan pesan dari induk <div> muncul kecuali kotak centang tersebut dipilih.

EventHandler7.razor:

@page "/event-handler-7"

<PageTitle>Event Handler 7</PageTitle>

<h1>Event Handler Example 7</h1>

<div>
    <b>stopPropagation</b>: @stopPropagation
</div>

<div>
    <button @onclick="StopPropagation">
        Stop Propagation (stopPropagation = true)
    </button>
    <button @onclick="EnablePropagation">
        Enable Propagation (stopPropagation = false)
    </button>
</div>

<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
    <h3>Parent div</h3>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
        Child div that never stops propagation to the parent div when 
        selected.
    </div>

    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
            @onclick:stopPropagation="stopPropagation">
        Child div that stops propagation when selected if 
        <b>stopPropagation</b> is <b>true</b>.
    </div>
</div>

<p>
    @message
</p>

@code {
    private bool stopPropagation = false;
    private string? message;

    private void StopPropagation() => stopPropagation = true;

    private void EnablePropagation() => stopPropagation = false;

    private void OnSelectParentDiv() => 
        message = $"The parent div was selected. {DateTime.Now}";

    private void OnSelectChildDiv() => 
        message = $"The child div was selected. {DateTime.Now}";
}

Memfokuskan elemen

Panggil FocusAsync referensi elemen untuk memfokuskan elemen dalam kode. Dalam contoh berikut, pilih tombol untuk memfokuskan <input> elemen.

EventHandler8.razor:

@page "/event-handler-8"

<PageTitle>Event Handler 8</PageTitle>

<h1>Event Handler Example 8</h1>

<p>Select the button to give the <code><input></code> focus.</p>

<p>
    <label>
        Input: 
        <input @ref="exampleInput" />
    </label>
    
</p>

<button @onclick="ChangeFocus">
    Focus the Input Element
</button>

@code {
    private ElementReference exampleInput;

    private async Task ChangeFocus()
    {
        await exampleInput.FocusAsync();
    }
}