ASP.NET Core Blazor olay işleme

Bu makalede olay bağımsız değişken türleri, olay geri çağırmaları ve varsayılan tarayıcı olaylarını yönetme gibi olay işleme özellikleri açıklanmaktadır Blazor.

Olay işleyicilerini temsilci olarak atama

Bileşen işaretlemesinde Razor temsilci olay işleyicilerini söz dizimi ile @on{DOM EVENT}="{DELEGATE}"Razor belirtin:

• Yer {DOM EVENT} tutucu bir DOM olayıdır (örneğin, click).
• Yer {DELEGATE} tutucu, C# temsilcisi olay işleyicisidir.

Olay işleme için:

• 'deki Blazor Web Apptemsilci olay işleyicileri yalnızca etkileşimli işleme modunu benimseyen bileşenlerde çağrılır. Bu makaledeki örneklerde, uygulamanın genellikle bileşen olan kök bileşeninde genel olarak etkileşimli bir işleme modunu benimsediği App varsayılır. Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.
• döndüren Task zaman uyumsuz temsilci olay işleyicileri desteklenir.
• Temsilci olay işleyicileri kullanıcı arabirimi işlemesini otomatik olarak tetikler, bu nedenle el ile çağrı StateHasChangedyapmanıza gerek yoktur.
• Özel durumlar günlüğe kaydedilir.

Aşağıdaki kod:

• Kullanıcı arabiriminde UpdateHeading düğme seçildiğinde yöntemini çağırır.
• Kullanıcı arabiriminde CheckChanged onay kutusu değiştirildiğinde yöntemini çağırır.

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}";
}

Aşağıdaki örnekte: UpdateHeading

• Düğme seçildiğinde zaman uyumsuz olarak çağrılır.
• Başlığı güncelleştirmeden önce iki saniye bekler.

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})";
    }
}

Yerleşik olay bağımsız değişkenleri

Bir olay bağımsız değişken türünü destekleyen olaylar için, olay yöntemi tanımında bir olay parametresinin belirtilmesi yalnızca yöntemde olay türü kullanılıyorsa gereklidir. Aşağıdaki örnekte, MouseEventArgs kullanıcı kullanıcı arabiriminde bir düğme seçtiğinde ReportPointerLocation fare koordinatlarını bildiren ileti metnini ayarlamak için yönteminde kullanılır.

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}";
}

Desteklenenler EventArgs aşağıdaki tabloda gösterilmiştir.

Etkinlik	Sınıf	DOM notları
Pano	ClipboardEventArgs
Sürükleme	DragEventArgs	DataTransfer ögesini seçin ve DataTransferItem sürüklenen öğe verilerini basılı tutun. HTML Sürükleme ve Bırakma API'siyle Blazorbirlikte çalışma kullanarak JS uygulamalarda sürükleyip bırakma uygulayın.
Hata	ErrorEventArgs
Etkinlik	EventArgs	EventHandlers , olay adları ve olay bağımsız değişken türleri arasındaki eşlemeleri yapılandırmak için öznitelikleri barındırıyor.
Odaklanma	FocusEventArgs	desteği relatedTargetiçermez.
Giriş	ChangeEventArgs
Klavye	KeyboardEventArgs
Fare	MouseEventArgs
Mouse pointer	PointerEventArgs
Fare tekerleği	WheelEventArgs
İlerleme Durumu	ProgressEventArgs
Dokunma	TouchEventArgs	TouchPoint dokunmaya duyarlı bir cihazdaki tek bir temas noktasını temsil eder.

Daha fazla bilgi edinmek için aşağıdaki kaynaklara bakın:

• EventArgs ASP.NET Core başvuru kaynağındaki sınıflar (dotnet/aspnetcore main dalı)

  Not

  .NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

• EventHandlers , olay adları ve olay bağımsız değişken türleri arasındaki eşlemeleri yapılandırmak için öznitelikleri barındırıyor.

Özel olay bağımsız değişkenleri

Blazor özel olay bağımsız değişkenlerini destekler. Bu, özel olaylarla .NET olay işleyicilerine rastgele veriler geçirmenizi sağlar.

Genel yapılandırma

Özel olay bağımsız değişkenleri olan özel olaylar genellikle aşağıdaki adımlarla etkinleştirilir.

JavaScript'te, kaynak olaydan özel olay bağımsız değişkeni nesnesi oluşturmak için bir işlev tanımlayın:

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

event parametresi bir DOM Olayıdır (MDN belgeleri).

Özel olayı önceki işleyiciyle bir JavaScript başlatıcıya kaydedin. kullanıcı arabirimindeki bir düğme seçimi için bu bölümde click gösterilen örnek için uygun tarayıcı olay adını browserEventNamegirin.

wwwroot/{PACKAGE ID/ASSEMBLY NAME}.lib.module.js{PACKAGE ID/ASSEMBLY NAME}(yer tutucu, uygulamanın paket kimliği veya derleme adıdır):

bir Blazor Web Appiçin:

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

Bir Blazor Server veya Blazor WebAssembly uygulaması için:

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

çağrısı registerCustomEventType bir betikte olay başına yalnızca bir kez gerçekleştirilir.

çağrısı içinregisterCustomEventType, başlangıç olayı tarafından Blazor sağlanan parametresini (küçük harfb) kullanınblazor. Nesne (büyük harfB) kullanılırken Blazor kayıt geçerli olsa da, tercih edilen yaklaşım parametresini kullanmaktır.

Önceki örnekteki özel olay adı customevent , ayrılmış Blazor olay adıyla eşleşmemelidir. Ayrılmış adlar çerçeve başvuru kaynağında Blazor bulunabilir (işleve yapılan çağrılara registerBuiltInEventType bakın).

Not

.NET başvuru kaynağına yönelik belge bağlantıları genellikle deponun varsayılan dalını yükler ve bu dal .NET'in sonraki sürümü için geçerli geliştirmeyi temsil eder. Belirli bir sürümün etiketini seçmek için Dalları veya etiketleri değiştir açılan listesini kullanın. Daha fazla bilgi için bkz. ASP.NET Core kaynak kodunun sürüm etiketini seçme (dotnet/AspNetCore.Docs #26205).

Olay bağımsız değişkenleri için bir sınıf tanımlayın:

namespace BlazorSample.CustomEvents;

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

Özel olay için bir [EventHandler] öznitelik ek açıklaması ekleyerek özel olayı olay bağımsız değişkenleriyle bağlama:

• Derleyicinin sınıfı bulabilmesi [EventHandler] için C# sınıf dosyasına ().cs yerleştirilerek normal bir üst düzey sınıf haline getirilmesi gerekir.
• sınıfını publicişaretleyin.
• Sınıfı için üye gerekmez.
• Derleyici tarafından Razor bulunabilmesi için sınıfı "EventHandlers" olarak adlandırılmalıdır.
• sınıfını uygulamanıza özgü bir ad alanının altına yerleştirin.
• Ad alanını olayın kullanıldığı bileşene Razor (.razor) aktarın.

using Microsoft.AspNetCore.Components;

namespace BlazorSample.CustomEvents;

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

Olay işleyicisini bir veya daha fazla HTML öğesine kaydedin. Temsilci işleyici yönteminde JavaScript'ten geçirilen verilere erişin:

@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;
    }
}

@oncustomevent Öznitelik IntelliSense tarafından tanınmıyorsa, bileşenin veya _Imports.razor dosyanın sınıfını içeren ad alanı için bir @using deyimi içerdiğinden EventHandler emin olun.

DOM'da özel olay tetiklendiğinde, olay işleyicisi JavaScript'ten geçirilen verilerle çağrılır.

Özel bir olayı tetikleme girişiminde bulunursanız, bubbles değerini trueolarak ayarlayarak etkinleştirilmesi gerekir. Aksi takdirde, olay C# özel [EventHandler] öznitelik sınıfına işlenmek üzere işleyiciye ulaşmazBlazor. Daha fazla bilgi için bkz . MDN Web Belgeleri: Olay kabarcıkları.

Özel pano yapıştırma olayı örneği

Aşağıdaki örnek, yapıştırma zamanını ve kullanıcının yapıştırılan metnini içeren özel bir pano yapıştırma olayı alır.

Olay için özel bir ad (oncustompaste) ve bu olayın olay bağımsız değişkenlerini tutmak için bir .NET sınıfı (CustomPasteEventArgs) bildirin:

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; }
}

Bir JavaScript başlatıcısında EventArgsönceki işleyiciyle alt sınıf için veri sağlamak için JavaScript kodu ekleyin. Aşağıdaki örnek yalnızca metin yapıştırmayı işler, ancak resimler gibi diğer veri türlerini yapıştıran kullanıcılarla ilgilenmek için rastgele JavaScript API'leri kullanabilirsiniz.

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

bir Blazor Web Appiçin:

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

Bir Blazor Server veya Blazor WebAssembly uygulaması için:

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

Yukarıdaki örnekte, {PACKAGE ID/ASSEMBLY NAME} dosya adının yer tutucusu uygulamanın paket kimliğini veya derleme adını temsil eder.

Not

çağrısı içinregisterCustomEventType, başlangıç olayı tarafından Blazor sağlanan parametresini (küçük harfb) kullanınblazor. Nesne (büyük harfB) kullanılırken Blazor kayıt geçerli olsa da, tercih edilen yaklaşım parametresini kullanmaktır.

Yukarıdaki kod, yerel paste bir olay gerçekleştiğinde tarayıcıya şunu söyler:

• Bir custompaste olay tetikle.
• Belirtilen özel mantığı kullanarak olay bağımsız değişkenleri verilerini sağlayın:
  • için eventTimestampyeni bir tarih oluşturun.
  • için pastedDatapano verilerini metin olarak alın. Daha fazla bilgi için bkz . MDN Web Docs: ClipboardEvent.clipboardData.

Olay adı kuralları .NET ile JavaScript arasında farklılık gösterir:

• .NET'te olay adları "on" ön ekiyle gösterilir.
• JavaScript'te olay adlarının ön eki yoktur.

Bir Razor bileşende, özel işleyiciyi bir öğeye ekleyin.

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}";
    }
}

Lambda ifadeleri

Lambda ifadeleri temsilci olay işleyicisi olarak desteklenir.

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";
}

Genellikle, bir dizi öğeyi yinelerken olduğu gibi C# yöntemi parametrelerini kullanarak ek değerleri kapatmak uygundur. Aşağıdaki örnek, her biri aşağıdaki verileri çağıran UpdateHeading ve geçiren üç düğme oluşturur:

• içindeki ebir olay bağımsız değişkeni (MouseEventArgs).
• içindeki buttonNumberdüğme numarası.

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}";
}

Bir döngüde çok sayıda olay temsilcisi oluşturmak, düşük işleme performansına neden olabilir. Daha fazla bilgi için bkz . ASP.NET Temel Blazor performans en iyi yöntemleri.

Önceki for döngü örneğinde olduğu gibi i bir lambda ifadesinde doğrudan bir döngü değişkeni kullanmaktan kaçının. Aksi takdirde, aynı değişken tüm lambda ifadeleri tarafından kullanılır ve bu da tüm lambdalarda aynı değerin kullanılmasına neden olur. Değişkenin değerini yerel değişkende yakalayın. Yukarıdaki örnekte:

• Döngü değişkeni i öğesine buttonNumberatanır.
• buttonNumber lambda ifadesinde kullanılır.

Alternatif olarak, önceki sorundan muzdarip olmayan ile Enumerable.Rangebir foreach döngü kullanın:

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

EventCallback

İç içe bileşenlerle ilgili yaygın bir senaryo, bir alt bileşen olayı gerçekleştiğinde bir yöntemi üst bileşende yürütmektir. onclick Alt bileşende gerçekleşen bir olay yaygın bir kullanım örneğidir. Olayları bileşenler arasında kullanıma açmak için kullanın EventCallback. Üst bileşen, alt EventCallbackbileşenin öğesine geri çağırma yöntemi atayabilir.

Aşağıdaki Child bileşen, bir düğmenin işleyicisinin onclick örneğin ParentComponentiçinden temsilci EventCallback alacak şekilde nasıl ayarlandığını gösterir. EventCallback, çevre birimi cihazından gelen bir onclick olay için uygun olan ile MouseEventArgsyazıldı.

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; }
}

Üst bileşen, alt EventCallback<TValue> öğesinin (OnClickCallback) yöntemini ShowMessage ayarlar.

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})";
}

içinde düğme seçildiğinde ChildComponent:

• Bileşenin Parent ShowMessage yöntemi çağrılır. message güncelleştirilir ve bileşende Parent görüntülenir.
• çağrısı, geri çağırmanın StateHasChanged yönteminde (ShowMessage) gerekli değildir. StateHasChanged , alt olayların alt öğe içinde yürütülen olay işleyicilerinde bileşen yeniden oluşturmayı tetiklediği gibi, bileşeni yeniden çalıştırmak için Parent otomatik olarak çağrılır. Daha fazla bilgi için bkz. ASP.NET Core Razor bileşenini işleme.

Olay işleme ve bağlama bileşeni parametreleri için ve EventCallback<TValue> kullanınEventCallback.

yerine kesin olarak yazılanı EventCallback<TValue> tercih edin EventCallback. EventCallback<TValue> uygun olmayan bir tür kullanıldığında gelişmiş hata geri bildirimi sağlayarak bileşenin kullanıcılarını doğru uygulamaya yönlendirir. Diğer kullanıcı arabirimi olay işleyicilerine benzer şekilde, olay parametresinin belirtilmesi isteğe bağlıdır. Geri çağırmaya herhangi bir değer geçirilmediğinde kullanın EventCallback .

EventCallback ve EventCallback<TValue> zaman uyumsuz temsilcilere izin verin. EventCallback türü zayıftır ve içindeki herhangi bir tür bağımsız değişkeninin geçirilmesine InvokeAsync(Object)izin verir. EventCallback<TValue> türü kesin olarak belirlenmiştir ve öğesine atanabilir bir T bağımsız değişkenin geçirilmesini InvokeAsync(T) TValuegerektirir.

ile InvokeAsync bir EventCallback veya EventCallback<TValue> çağırın ve için beklemede:Task

await OnClickCallback.InvokeAsync({ARGUMENT});

Yukarıdaki örnekte yer {ARGUMENT} tutucu isteğe bağlı bir bağımsız değişkendir.

Aşağıdaki üst-alt örnek tekniği gösterir.

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;
}

Bileşenin Child2 ikinci oluşumu zaman uyumsuz bir geri çağırma gösterir ve yeni message2 değer atanır ve iki saniyelik bir gecikmeyle işlenir.

Varsayılan eylemleri engelle

Yer tutucunun @on{DOM EVENT}:preventDefault bir DOM olayı olduğu {DOM EVENT} bir olay için varsayılan eylemi önlemek için yönerge özniteliğini kullanın.

Giriş cihazında bir anahtar seçildiğinde ve öğe odağı bir metin kutusunda olduğunda, tarayıcı normalde metin kutusunda anahtarın karakterini görüntüler. Aşağıdaki örnekte, yönerge özniteliği belirtilerek @onkeydown:preventDefault varsayılan davranış engellenir. Odak öğesinde <input> olduğunda, sayaç Shift++ anahtar dizisiyle artar. Karakter + öğenin değerine atanmamış <input> . hakkında keydowndaha fazla bilgi için bkz MDN Web Docs: Document: keydown . olay.

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++;
        }
    }
}

Özniteliği değer @on{DOM EVENT}:preventDefault olmadan belirtmek ile @on{DOM EVENT}:preventDefault="true"eşdeğerdir.

İfade ayrıca özniteliğinin izin verilen bir değeridir. Aşağıdaki örnekte, shouldPreventDefault veya falseolarak true ayarlanmış bir bool alan verilmiştir:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Olay yaymayı durdurma

@on{DOM EVENT}:stopPropagation Kapsam içinde olay yaymayı durdurmak için yönerge özniteliğini Blazor kullanın. {DOM EVENT}DOM olayı için yer tutucudur.

stopPropagation Yönerge özniteliğinin etkisi kapsamla Blazor sınırlıdır ve HTML DOM'a genişletilmez. Olaylar üzerinde işlem yapılabilmesi için önce Blazor HTML DOM köküne yayılması gerekir. HTML DOM olay yaymayı önleme mekanizması için aşağıdaki yaklaşımı göz önünde bulundurun:

• çağırarak Event.composedPath()olayın yolunu alın.
• Oluşturulan olay hedeflerine (EventTarget) göre olayları filtreleyin.

Aşağıdaki örnekte onay kutusunun seçilmesi, ikinci alt öğeden <div> gelen tıklama olaylarının üst <div>öğesine yayılmasını engeller. Yayılan tıklama olayları normalde yöntemi tetiklediğinden OnSelectParentDiv , ikinci alt öğe <div> seçildiğinde onay kutusu seçilmediği sürece üst <div> ileti görüntülenir.

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}";
}

Öğeyi odaklama

Koddaki bir öğeye odaklanmak için öğe başvurusunda çağrısında FocusAsync bulunur. Aşağıdaki örnekte, öğeye odaklanmak için düğmeyi <input> seçin.

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();
    }
}