ASP.NET Core Blazor olay işleme

  • Makale
  • Okumak için 12 dakika

Bileşen biçimlendirmesinde temsilci olay işleyicilerini Razor sözdizimi ile belirtin @on{DOM EVENT}="{DELEGATE}" Razor :

Olay işleme için:

  • Döndüren zaman uyumsuz temsilci olay işleyicileri Task desteklenir.
  • Temsilci olay işleyicileri otomatik olarak bir UI işlemesini tetikleyip el ile çağırmanız gerekmez StateHasChanged .
  • Özel durumlar günlüğe kaydedilir.

Aşağıdaki kod:

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

Pages/EventHandlerExample1.razor:

@page "/event-handler-example-1"

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

@code {
    private string currentHeading = "Initial heading";
    private string? newHeading;
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {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.

Pages/EventHandlerExample2.razor:

@page "/event-handler-example-2"

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string? newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

Olay bağımsız değişkenleri

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

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

Pages/EventHandlerExample3.razor:

@page "/event-handler-example-3"

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

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

Olay Sınıf Belge nesne modeli (DOM) olayları ve notları
Pano ClipboardEventArgs oncut, oncopy, onpaste
Sürükleyin DragEventArgs ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend

DataTransfer ve DataTransferItem öğe verilerini sürüklemiş tutun.

Blazor HTML sürükleme ve bırakma API 'Siile js birlikte çalışma kullanarak uygulamalarda sürükleyip bırakma uygulayın.
Hata ErrorEventArgs onerror
Olay EventArgs Genel
onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll

Pano
onbeforecut, onbeforecopy, onbeforepaste

Giriş
oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

Medya
oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

EventHandlers olay adlarıyla olay bağımsız değişken türleri arasındaki eşlemeleri yapılandırmak için öznitelikleri tutar.
Odaklanma FocusEventArgs onfocus, onblur, onfocusin, onfocusout

İçin destek içermez relatedTarget .
Giriş ChangeEventArgs onchange, oninput
Klavye KeyboardEventArgs onkeydown, onkeypress, onkeyup
Fare MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
Fare işaretçisi PointerEventArgs onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture
Fare tekerleği WheelEventArgs onwheel, onmousewheel
İlerleme Durumu ProgressEventArgs onabort, onload, onloadend, onloadstart, onprogress, ontimeout
Dokunma TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

TouchPoint dokunarak duyarlı bir cihazdaki tek bir iletişim noktasını temsil eder.

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

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

Blazor özel olaylar içeren .NET olay işleyicilerine rastgele veri geçirmenize olanak sağlayan özel olay bağımsız değişkenlerini destekler.

Genel yapılandırma

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

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

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

  2. Özel olayı wwwroot/index.html Blazor WebAssembly , () veya () içindeki önceki işleyiciyle Pages/_Layout.cshtml Blazor Server hemen sonra Kaydet Blazor <script> :

    <script>
  Blazor.registerCustomEventType('customevent', {
    createEventArgs: eventArgsCreator;
  });
</script>

    Not

    Çağrısı, registerCustomEventType bir komut dosyasında olay başına yalnızca bir kez gerçekleştirilir.

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

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

  4. Özel olay EventHandlerAttribute için bir öznitelik ek açıklaması ekleyerek olay bağımsız değişkenleriyle özel olayı bağlayın. Sınıf, Üyeler gerektirmez:

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

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

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

@code
{
    void HandleCustomEvent(CustomEventArgs eventArgs)
    {
        // eventArgs.CustomProperty1
        // eventArgs.CustomProperty2
    }
}

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

Özel bir olayı tetikmeye çalışıyorsanız, bubbles değeri olarak ayarlanarak etkinleştirilmesi gerekir true . Aksi takdirde olay, Blazor C# özel yöntemine işlenmek üzere işleyiciye ulaşmaz EventHandlerAttribute . Daha fazla bilgi için bkz. MDN Web belgeleri: olay köpürme.

Özel Pano Yapıştır olay örneği

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

oncustompaste CustomPasteEventArgs Bu olay için olay bağımsız değişkenlerini tutmak üzere Event ve .NET Class () için özel bir ad () bildirin:

CustomEvents.cs:

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

Alt sınıfa yönelik verileri sağlamak için JavaScript kodu ekleyin EventArgs . wwwroot/index.htmlVeya Pages/_Layout.cshtml dosyasında, <script> komut dosyası hemen sonrasında aşağıdaki etiketi ve içeriği ekleyin Blazor . Aşağıdaki örnek yalnızca metin yapıştırmayı işler, ancak görüntüler gibi diğer veri türlerini yapıştırarak kullanıcılara yönelik rastgele JavaScript API 'Leri kullanabilirsiniz.

wwwroot/index.html ( Blazor WebAssembly ) veya Pages/_Layout.cshtml ( Blazor Server ) Blazor komut dosyasından hemen sonra:

<script>
    Blazor.registerCustomEventType('custompaste', {
        browserEventName: 'paste',
        createEventArgs: event => {
            return {
                eventTimestamp: new Date(),
                pastedData: event.clipboardData.getData('text')
            };
        }
    });
</script>

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

  • Bir custompaste olay oluştur.
  • Belirtilen özel mantığı kullanarak olay bağımsız değişkenlerinin verilerini sağlayın:

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

  • .NET ' te, olay adlarına önek olarak " on " eklenir.
  • JavaScript 'te, olay adlarının öneki yoktur.

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

Pages/CustomPasteArguments.razor:

@page "/custom-paste-arguments"

<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.

Pages/EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

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

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

Genellikle, bir dizi öğe üzerinde yineleme yaparken gibi C# Yöntem parametreleri kullanılarak ek değerlerin kapatılmasını çok uygundur. Aşağıdaki örnek, her biri UpdateHeading aşağıdaki verileri çağıran ve ileten üç düğme oluşturur:

  • İçindeki bir olay bağımsız değişkeni ( MouseEventArgs ) e .
  • İçindeki düğme numarası buttonNumber .

Pages/EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

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

Not

Bir Loop değişkenini, i Yukarıdaki döngü örneğinde olduğu gibi doğrudan bir lambda ifadesinde kullanmayın for . Aksi halde, aynı değişken tüm lambda ifadeleri tarafından kullanılır ve tüm Lambdalar için aynı değerin kullanılmasına neden olur. Değişkenin değerini her zaman yerel bir değişkende yakala ve sonra kullanın. Yukarıdaki örnekte:

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

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

EventCallback

İç içe bileşenler içeren yaygın bir senaryo, bir alt bileşen olayı gerçekleştiğinde bir üst bileşenin yöntemini yürütür. onclickAlt bileşende gerçekleşen bir olay yaygın kullanım durumdur. Olayları bileşenler genelinde göstermek için bir kullanın EventCallback . Bir üst bileşen bir alt bileşene geri çağırma yöntemi atayabilir EventCallback .

Aşağıdaki Child Bileşen, bir düğmenin onclick işleyicisinin örnek tarafından bir temsilci alacak şekilde nasıl ayarlandığını göstermektedir EventCallback ParentComponent . ,, EventCallback MouseEventArgs onclick Bir çevre cihazından bir olay için uygun olan ile öğesine yazılır.

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

ParentBileşen, alt öğenin EventCallback<TValue> ( OnClickCallback ) metodunu kendi yöntemine ayarlar ShowMessage .

Pages/Parent.razor:

@page "/parent"

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

Düğme ' de seçildiğinde ChildComponent :

  • ParentBileşenin ShowMessage yöntemi çağrılır. message güncelleştirilir ve Parent bileşende görüntülenir.
  • StateHasChangedGeri çağırma yönteminde () bir çağrısı gerekli değildir ShowMessage . StateHasChanged alt Parent Olaylar, alt öğe içinde yürütülen olay işleyicilerinde bileşen rerendering tetikleyeceğinden, bileşeni yeniden çalıştırmak için otomatik olarak çağrılır. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.

EventCallback ve EventCallback<TValue> zaman uyumsuz temsilcilere izin verir. EventCallback kesin olarak yazılmış ve içinde herhangi bir tür bağımsız değişkeni geçişine izin veriyor InvokeAsync(Object) . EventCallback<TValue> kesin bir şekilde türdedir ve T Bu öğesine atanabilen bir bağımsız değişken geçirilmesini gerektirir InvokeAsync(T) TValue .

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

Bir EventCallback veya EventCallback<TValue> ile çağırın InvokeAsync ve şunu bekler Task :

await OnClickCallback.InvokeAsync(arg);

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

Kesin olarak belirlenmiş türü tercih edin EventCallback<TValue> EventCallback . EventCallback<TValue> bileşenin kullanıcılarına gelişmiş hata geri bildirimi sağlar. Diğer UI olay işleyicileriyle benzer şekilde, olay parametresini belirtmek isteğe bağlıdır. EventCallbackGeri çağırmaya hiçbir değer geçirilmemişse kullanın.

Varsayılan eylemleri engelle

@on{DOM EVENT}:preventDefault {DOM EVENT} Yer tutucunun bir belge nesne modeli (DOM) olayıolduğu bir olayın varsayılan eylemini engellemek için Directive özniteliğini kullanın.

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

Pages/EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

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

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

Bir ifade ayrıca özniteliğin izin verilen bir değeridir. Aşağıdaki örnekte, shouldPreventDefault bool ya da olarak ayarlanan bir alandır true false :

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

...

@code {
    private bool shouldPreventDefault = true;
}

Olay yaymayı durdur

@on{DOM EVENT}:stopPropagationKapsam içindeki olay yaymayı durdurmak için Directive özniteliğini kullanın Blazor . {DOM EVENT}belge nesne modeli (DOM) olayıiçin bir yer tutucudur.

stopPropagationYönerge özniteliğinin etkisi Blazor kapsamıyla SıNıRLıDıR ve HTML DOM 'a genişlemez. Olayları, üzerinde işlem yapabilmeniz için önce HTML DOM köküne yaymalıdır Blazor . HTML DOM olayı yaymayı önleyen bir mekanizma için aşağıdaki yaklaşımı göz önünde bulundurun:

Aşağıdaki örnekte, onay kutusunun belirlenmesi ikinci alt öğeden üst öğeye yayılmayacak olay tıklamasını önler <div> <div> . Yayılmış tıklama olayları normalde yöntemi harekete tetikleneceği için OnSelectParentDiv , ikinci alt öğenin seçilmesi, <div> <div> onay kutusu seçilmediği takdirde ana iletinin görünmesine neden olacak şekilde görünür.

Pages/EventHandlerExample7.razor:

@page "/event-handler-example-7"

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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

Bir öğeyi odaklayın

FocusAsyncKodda bir öğeyi odaklamak için bir öğe başvurusu üzerinde çağırın. Aşağıdaki örnekte, öğeyi odaklamak için düğmesini seçin <input> .

Pages/EventHandlerExample8.razor:

@page "/event-handler-example-8"

<p>
    <input @ref="exampleInput" />
</p>

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

@code {
    private ElementReference exampleInput;

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

Bileşen biçimlendirmesinde temsilci olay işleyicilerini Razor sözdizimi ile belirtin @on{DOM EVENT}="{DELEGATE}" Razor :

Olay işleme için:

  • Döndüren zaman uyumsuz temsilci olay işleyicileri Task desteklenir.
  • Temsilci olay işleyicileri otomatik olarak bir UI işlemesini tetikleyip el ile çağırmanız gerekmez StateHasChanged .
  • Özel durumlar günlüğe kaydedilir.

Aşağıdaki kod:

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

Pages/EventHandlerExample1.razor:

@page "/event-handler-example-1"

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

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

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {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.

Pages/EventHandlerExample2.razor:

@page "/event-handler-example-2"

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

Olay bağımsız değişkenleri

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

Pages/EventHandlerExample3.razor:

@page "/event-handler-example-3"

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

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

Olay Sınıf Belge nesne modeli (DOM) olayları ve notları
Pano ClipboardEventArgs oncut, oncopy, onpaste
Sürükleyin DragEventArgs ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend

DataTransfer ve DataTransferItem öğe verilerini sürüklemiş tutun.

Blazor HTML sürükleme ve bırakma API 'Siile js birlikte çalışma kullanarak uygulamalarda sürükleyip bırakma uygulayın.
Hata ErrorEventArgs onerror
Olay EventArgs Genel
onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll

Pano
onbeforecut, onbeforecopy, onbeforepaste

Giriş
oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

Medya
oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

EventHandlers olay adlarıyla olay bağımsız değişken türleri arasındaki eşlemeleri yapılandırmak için öznitelikleri tutar.
Odaklanma FocusEventArgs onfocus, onblur, onfocusin, onfocusout

İçin destek içermez relatedTarget .
Giriş ChangeEventArgs onchange, oninput
Klavye KeyboardEventArgs onkeydown, onkeypress, onkeyup
Fare MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
Fare işaretçisi PointerEventArgs onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture
Fare tekerleği WheelEventArgs onwheel, onmousewheel
İlerleme Durumu ProgressEventArgs onabort, onload, onloadend, onloadstart, onprogress, ontimeout
Dokunma TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

TouchPoint dokunarak duyarlı bir cihazdaki tek bir iletişim noktasını temsil eder.

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

Lambda ifadeleri

Lambda ifadeleri , temsilci olay işleyicisi olarak desteklenir.

Pages/EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

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

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

Genellikle, bir dizi öğe üzerinde yineleme yaparken gibi C# Yöntem parametreleri kullanılarak ek değerlerin kapatılmasını çok uygundur. Aşağıdaki örnek, her biri UpdateHeading aşağıdaki verileri çağıran ve ileten üç düğme oluşturur:

  • İçindeki bir olay bağımsız değişkeni ( MouseEventArgs ) e .
  • İçindeki düğme numarası buttonNumber .

Pages/EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

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

Not

Bir Loop değişkenini, i Yukarıdaki döngü örneğinde olduğu gibi doğrudan bir lambda ifadesinde kullanmayın for . Aksi halde, aynı değişken tüm lambda ifadeleri tarafından kullanılır ve tüm Lambdalar için aynı değerin kullanılmasına neden olur. Değişkenin değerini her zaman yerel bir değişkende yakala ve sonra kullanın. Yukarıdaki örnekte:

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

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

EventCallback

İç içe bileşenlere sahip yaygın bir senaryo, bir alt bileşen olayı oluştuğunda bir üst bileşenin yöntemini yürütür. Alt onclick bileşende oluşan bir olay yaygın bir kullanım durumu değildir. Bileşenleri arasında olayları açığa çıkarmak için bir EventCallback kullanın. Üst bileşen, bir alt bileşenin 'ine bir geri çağırma yöntemi atay EventCallback olabilir.

Aşağıdaki Child bileşen, bir düğme işleyicinin örneğinden bir temsilci onclick alacak şekilde nasıl ayar olduğunu EventCallback ParentComponent gösterir. EventCallback, çevre birimi MouseEventArgs cihazından bir olay için uygun olan onclick ile birlikte yazıldı.

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

Bileşen, Parent alt kümeyi EventCallback<TValue> ( ) OnClickCallback yöntemine ShowMessage ayarlar.

Pages/Parent.razor:

@page "/parent"

<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 ChildComponent seçildiğinde:

  • Bileşenin Parent yöntemi ShowMessage çağrılır. message bileşeninde güncelleştirilir ve Parent görüntülenir.
  • çağrısı, StateHasChanged geri çağırmanın yönteminde gerekli değildir ( ShowMessage ). StateHasChanged , alt olaylarda yürütülen olay işleyicileri içinde bileşen yeniden işleyicilerini tetikleye gibi, bileşenin yeniden Parent işleyicisi olarak otomatik olarak çağrılır. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.

EventCallback ve EventCallback<TValue> zaman uyumsuz temsilcilere izin verme. EventCallback zayıf bir şekilde yazıldı ve içinde herhangi bir tür bağımsız değişkeninin geçişe izin InvokeAsync(Object) verir. EventCallback<TValue> kesin olarak yazılabilir ve içinde T 'ye InvokeAsync(T) atanabilir bir bağımsız değişken geçirmeyi TValue gerektirir.

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

ile bir EventCallback veya çağırma ve ile EventCallback<TValue> InvokeAsync bekle: Task

await OnClickCallback.InvokeAsync(arg);

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

yerine türü kesin olarak yazarak tercih EventCallback<TValue> EventCallback edersiniz. EventCallback<TValue> bileşenin kullanıcılarına gelişmiş hata geri bildirimi sağlar. Diğer ui olay işleyicileri gibi, olay parametresini belirtmek isteğe bağlıdır. Geri EventCallback çağırmaya geçirilen bir değer olduğunda kullanın.

Varsayılan eylemleri engelle

Yer @on{DOM EVENT}:preventDefault tutucusu bir olay (DOM) olayı olduğu bir olay için varsayılan {DOM EVENT} eylemi önlemek Belge Nesne Modeli ö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 belirterek varsayılan davranış @onkeydown:preventDefault önlenmiştir. Odak öğesinde olduğunda, sayaç anahtar dizisi Shift <input> ile artırılır. + + +Karakteri öğenin <input> değerine atanmamış. hakkında daha fazla bilgi keydown için bkz. MDN Web Docs: Document: keydown olayı.

Pages/EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

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

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

İfade ayrıca özniteliğin izin verilen bir değeridir. Aşağıdaki örnekte, veya shouldPreventDefault olarak bool ayarlanmış bir true false alandır:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Olay yayma durdurma

Kapsam @on{DOM EVENT}:stopPropagation içinde olay yayma durdurmak için yönerge özniteliğini Blazor kullanın. {DOM EVENT}, bir Belge Nesne Modeli (DOM) olayı için yer tutucudur.

stopPropagationYönerge özniteliğinin etkisi kapsamıyla Blazor sınırlıdır ve HTML DOM'sine genişletmez. Olaylar üzerinde eyleme geçemeden önce HTML DOM Blazor köküne yaymaları gerekir. HTML DOM olay yaymalarını önleyen bir mekanizma için aşağıdaki yaklaşımı göz önünde bulundurarak:

Aşağıdaki örnekte, onay kutusunu seçmek, ikinci alt öğeden gelen tıklama olaylarının üst <div> öğeye yayılmasını <div> önler. Yayma tıklama olayları normalde yöntemini başlatan bir yöntem olduğu için, ikinci alt öğe seçildiğinde onay kutusu OnSelectParentDiv <div> <div> seçilmediği sürece üst ileti görüntülenir.

Pages/EventHandlerExample7.razor:

@page "/event-handler-example-7"

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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

Öğeye odaklanma

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

Pages/EventHandlerExample8.razor:

@page "/event-handler-example-8"

<p>
    <input @ref="exampleInput" />
</p>

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

@code {
    private ElementReference exampleInput;

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

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

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

Olay işleme için:

  • bir dönüş zaman uyumsuz temsilci olay Task işleyicileri de destekler.
  • Olay işleyicilerini temsilci olarak temsilci olarak bir UI işlemesi tetikler, bu nedenle el ile çağrısı StateHasChanged gerekmez.
  • Özel durumlar günlüğe kaydedilir.

Aşağıdaki kod:

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

Pages/EventHandlerExample1.razor:

@page "/event-handler-example-1"

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

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

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

    private void UpdateHeading()
    {
        currentHeading = $"{newHeading}!!!";
    }

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

Aşağıdaki UpdateHeading örnekte:

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

Pages/EventHandlerExample2.razor:

@page "/event-handler-example-2"

<h1>@currentHeading</h1>

<p>
    <label>
        New title
        <input @bind="newHeading" />
    </label>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

@code {
    private string currentHeading = "Initial heading";
    private string newHeading;

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

        currentHeading = $"{newHeading}!!!";
    }
}

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 parametresi belirtmek yalnızca yöntemde olay türü kullanılıyorsa gereklidir. Aşağıdaki örnekte, kullanıcı arabiriminde bir düğmeyi seçerken fare koordinatlarını rapor eden ileti metnini ayarlamak MouseEventArgs ReportPointerLocation için yönteminde kullanılır.

Pages/EventHandlerExample3.razor:

@page "/event-handler-example-3"

@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.

Olay Sınıf Belge Nesne Modeli (DOM) olayları ve notları
Pano ClipboardEventArgs oncut, oncopy, onpaste
Sürükleyin DragEventArgs ondrag, ondragstart, ondragenter, ondragleave, ondragover, ondrop, ondragend

DataTransfer ve DataTransferItem sürüklenen öğe verilerini tutar.

HTML Sürükleme ve Bırakma Blazor API'si ile JS birlikte çalışma kullanarak uygulamalarda sürükleyip bırakma gerçekleştirin.
Hata ErrorEventArgs onerror
Olay EventArgs Genel
onactivate, onbeforeactivate, onbeforedeactivate, ondeactivate, onfullscreenchange, onfullscreenerror, onloadeddata, onloadedmetadata, onpointerlockchange, onpointerlockerror, onreadystatechange, onscroll

Pano
onbeforecut, onbeforecopy, onbeforepaste

Giriş
oninvalid, onreset, onselect, onselectionchange, onselectstart, onsubmit

Medya
oncanplay, oncanplaythrough, oncuechange, ondurationchange, onemptied, onended, onpause, onplay, onplaying, onratechange, onseeked, onseeking, onstalled, onstop, onsuspend, ontimeupdate, onvolumechange, onwaiting

EventHandlers , olay adları ve olay bağımsız değişken türleri arasındaki eşlemeleri yapılandırmak için öznitelikleri tutar.
Odaklanma FocusEventArgs onfocus, onblur, onfocusin, onfocusout

için destek relatedTarget içermez.
Giriş ChangeEventArgs onchange, oninput
Klavye KeyboardEventArgs onkeydown, onkeypress, onkeyup
Fare MouseEventArgs onclick, oncontextmenu, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
Fare işaretçisi PointerEventArgs onpointerdown, onpointerup, onpointercancel, onpointermove, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture
Fare tekerleği WheelEventArgs onwheel, onmousewheel
İlerleme Durumu ProgressEventArgs onabort, onload, onloadend, onloadstart, onprogress, ontimeout
Dokunma TouchEventArgs ontouchstart, ontouchend, ontouchmove, ontouchenter, ontouchleave, ontouchcancel

TouchPoint , dokunmaya duyarlı bir cihazda tek bir iletişim noktasını temsil eder.

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

Lambda ifadeleri

Lambda ifadeleri, temsilci olay işleyicisi olarak değerlendi.

Pages/EventHandlerExample4.razor:

@page "/event-handler-example-4"

<h1>@heading</h1>

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

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

C# yöntem parametrelerini kullanarak, örneğin bir öğe kümesi üzerinde tekrarlarken ek değerleri kapatmak genellikle kullanışlıdır. Aşağıdaki örnek, her biri aşağıdaki verileri çağıran UpdateHeading ve geçen üç düğme oluşturur:

  • içinde bir olay bağımsız değişkeni ( MouseEventArgs ). e
  • içinde düğme buttonNumber numarası.

Pages/EventHandlerExample5.razor:

@page "/event-handler-example-5"

<h1>@heading</h1>

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

Not

Önceki döngü örneğinde olduğu gibi bir lambda ifadesinde döngü i değişkenlerini doğrudan for kullanmayı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ımına neden olur. Değişkenin değerini her zaman yerel değişkende yakalayıp kullanın. Yukarıdaki örnekte:

  • döngü i değişkeni'ne buttonNumber atanır.
  • buttonNumber lambda ifadesinde kullanılır.

Bir döngüde çok sayıda olay temsilcisinin oluşturulması, düşük işleme performansına neden olabilir. Daha fazla bilgi için bkz. ASP.NET Core Blazor en iyi performans uygulamaları.

EventCallback

İç içe bileşenlere sahip yaygın bir senaryo, bir alt bileşen olayı oluştuğunda bir üst bileşenin yöntemini yürütür. Alt onclick bileşende oluşan bir olay yaygın bir kullanım durumu değildir. Bileşenleri arasında olayları açığa çıkarmak için bir EventCallback kullanın. Üst bileşen, bir alt bileşenin 'ine bir geri çağırma yöntemi atay EventCallback olabilir.

Aşağıdaki Child bileşen, bir düğme işleyicinin örneğinden bir temsilci alacak onclick şekilde nasıl ayar olduğunu EventCallback ParentComponent gösterir. EventCallback, çevre birimi MouseEventArgs cihazından bir olay için uygun olan onclick ile birlikte yazıldı.

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

Bileşen, Parent alt kümeyi EventCallback<TValue> ( ) OnClickCallback yöntemine ShowMessage ayarlar.

Pages/Parent.razor:

@page "/parent"

<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 ChildComponent seçildiğinde:

  • Bileşenin Parent yöntemi ShowMessage çağrılır. message bileşeninde güncelleştirilir ve Parent görüntülenir.
  • çağrısı, StateHasChanged geri çağırmanın yönteminde gerekli değildir ( ShowMessage ). StateHasChanged , alt olaylarda yürütülen olay işleyicileri içinde bileşen yeniden işleyicilerini tetikleye gibi, bileşenin yeniden Parent işleyicisi olarak otomatik olarak çağrılır. Daha fazla bilgi için bkz. BlazorASP.NET Core bileşen işleme.

EventCallback ve EventCallback<TValue> zaman uyumsuz temsilcilere izin verme. EventCallback zayıf bir şekilde yazıldı ve içinde herhangi bir tür bağımsız değişkeninin geçişe izin InvokeAsync(Object) verir. EventCallback<TValue> kesin olarak yazılabilir ve içinde T 'ye InvokeAsync(T) atanabilir bir bağımsız değişken geçirmeyi TValue gerektirir.

<ChildComponent 
    OnClickCallback="@(async () => { await Task.Yield(); messageText = "Blaze It!"; })" />

ile bir EventCallback veya çağırma ve ile EventCallback<TValue> InvokeAsync bekle: Task

await OnClickCallback.InvokeAsync(arg);

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

yerine türü kesin olarak yazarak tercih EventCallback<TValue> EventCallback edersiniz. EventCallback<TValue> bileşenin kullanıcılarına gelişmiş hata geri bildirimi sağlar. Diğer kullanıcı arabirimi olay işleyicileri gibi, olay parametresini belirtmek isteğe bağlıdır. Geri EventCallback çağırmaya hiçbir değer geçirilemezken kullanın.

Varsayılan eylemleri engelle

Yer @on{DOM EVENT}:preventDefault tutucusu bir olay (DOM) olayı olduğu bir olay için varsayılan {DOM EVENT} eylemi önlemek Belge Nesne Modeli özniteliğini kullanın.

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

Pages/EventHandlerExample6.razor:

@page "/event-handler-example-6"

<p>
    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
</p>

@code {
    private int count = 0;

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

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

İfade ayrıca özniteliğin izin verilen bir değeridir. Aşağıdaki örnekte, veya shouldPreventDefault olarak bool ayarlanmış bir true false alandır:

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

...

@code {
    private bool shouldPreventDefault = true;
}

Olay yayma durdurma

Kapsam @on{DOM EVENT}:stopPropagation içinde olay yayma durdurmak için yönerge özniteliğini Blazor kullanın. {DOM EVENT}, bir Belge Nesne Modeli (DOM) olayı için yer tutucudur.

stopPropagationYönerge özniteliğinin etkisi kapsamıyla sınırlıdır Blazor ve HTML DOM'sine genişletmez. Olaylar üzerinde eyleme geçemeden önce HTML DOM Blazor köküne yaymaları gerekir. HTML DOM olay yaymalarını önleyen bir mekanizma için aşağıdaki yaklaşımı göz önünde bulundurarak:

Aşağıdaki örnekte, onay kutusunu seçmek, ikinci alt öğeden gelen tıklama olaylarının üst <div> öğeye yayılmasını <div> önler. Yayma tıklama olayları normalde yöntemini başlatan bir yöntem olduğu için, ikinci alt öğe seçildiğinde, onay kutusu OnSelectParentDiv <div> <div> seçilmediği sürece üst ileti görüntülenir.

Pages/EventHandlerExample7.razor:

@page "/event-handler-example-7"

<label>
    <input @bind="stopPropagation" type="checkbox" />
    Stop Propagation
</label>

<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 doesn't stop propagation when selected.
    </div>

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

<p>
    @message
</p>

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

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

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