From 170bc015914d3643341243b00888a58c887ca377 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Thu, 11 Mar 2021 08:34:47 -0600
Subject: [PATCH 1/5] Blazor Event Handling UE Pass

---
 .../blazor/components/event-handling.md       | 283 +++++++++++++-----
 1 file changed, 206 insertions(+), 77 deletions(-)

diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md
index 451a1aa44283..36764e3564ee 100644
--- a/aspnetcore/blazor/components/event-handling.md
+++ b/aspnetcore/blazor/components/event-handling.md
@@ -5,67 +5,127 @@ description: Learn about Blazor's event handling features, including event argum
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 10/20/2020
+ms.date: 03/11/2021
 no-loc: [appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
 uid: blazor/components/event-handling
 ---
 # ASP.NET Core Blazor event handling
 
-Razor components provide event handling features. For an HTML element attribute named [`@on{EVENT}`](xref:mvc/views/razor#onevent) (for example, `@onclick`) with a delegate-typed value, a Razor component treats the attribute's value as an event handler.
+Specify delegate event handlers in Razor component markup with [`@on{EVENT}={DELEGATE}`](xref:mvc/views/razor#onevent) with the following placeholder values:
 
-The following code calls the `UpdateHeading` method when the button is selected in the UI:
+* `{EVENT}` is a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) event (for example, `@onclick`).
+* `{DELEGATE}` is the delegate-typed value.
 
-```razor
-<button class="btn btn-primary" @onclick="UpdateHeading">
-    Update heading
-</button>
+The following code:
 
-@code {
-    private void UpdateHeading(MouseEventArgs e)
-    {
-        ...
-    }
-}
-```
+* Calls the `UpdateHeading` method when the button is selected in the UI.
+* Calls the `CheckChanged` method when the check box is changed in the UI.
 
-The following code calls the `CheckChanged` method when the check box is changed in the UI:
+`Pages/EventHandlerExample1.razor`:
 
 ```razor
-<input type="checkbox" class="form-check-input" @onchange="CheckChanged" />
+@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}";
     }
 }
 ```
 
 Event handlers can also be asynchronous and return a <xref:System.Threading.Tasks.Task>. There's no need to manually call [StateHasChanged](xref:blazor/components/lifecycle#state-changes). Exceptions are logged when they occur.
 
-In the following example, `UpdateHeading` is called asynchronously when the button is selected:
+In the following example, `UpdateHeading`:
+
+* Is called asynchronously when the button is selected.
+* Waits two seconds before updating the heading.
+
+`Pages/EventHandlerExample2.razor`:
 
 ```razor
-<button class="btn btn-primary" @onclick="UpdateHeading">
-    Update heading
-</button>
+@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 async Task UpdateHeading(MouseEventArgs e)
+    private string currentHeading = "Initial heading";
+    private string newHeading;
+
+    private async Task UpdateHeading()
     {
-        await ...
+        await Task.Delay(2000);
+
+        currentHeading = $"{newHeading}!!!";
     }
 }
 ```
 
 ## Event argument types
 
-For some events, event argument types are permitted. Specifying an event parameter in an event method definition is optional and only necessary if the event type is used in the method. In the following example, the `MouseEventArgs` event argument is used in the `ShowMessage` method to set message text:
+For some events, event argument types are permitted. Specifying an event parameter in an event method definition is only necessary if the event type is used in the method. In the following example, the `MouseEventArgs` event argument is used in the `ReportPointerLocation` method to set message text.
 
-```csharp
-private void ShowMessage(MouseEventArgs e)
+`Pages/EventHandlerExample3.razor`:
+
+```razor
+@page "/event-handler-example-3"
+
+@for (var i = 0; i < 4; i++)
 {
-    messageText = $"The mouse is at coordinates: {e.ScreenX}:{e.ScreenY}";
+    <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}";
+    }
 }
 ```
 
@@ -73,8 +133,8 @@ Supported <xref:System.EventArgs> are shown in the following table.
 
 ::: moniker range=">= aspnetcore-5.0"
 
-| Event            | Class  | DOM events and notes |
-| ---------------- | ------ | -------------------- |
+| Event            | Class  | [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) events and notes |
+| ---------------- | ------ | --- |
 | Clipboard        | <xref:Microsoft.AspNetCore.Components.Web.ClipboardEventArgs> | `oncut`, `oncopy`, `onpaste` |
 | Drag             | <xref:Microsoft.AspNetCore.Components.Web.DragEventArgs> | `ondrag`, `ondragstart`, `ondragenter`, `ondragleave`, `ondragover`, `ondrop`, `ondragend`<br><br><xref:Microsoft.AspNetCore.Components.Web.DataTransfer> and <xref:Microsoft.AspNetCore.Components.Web.DataTransferItem> hold dragged item data.<br><br>Implement drag and drop in Blazor apps using [JS interop](xref:blazor/call-javascript-from-dotnet) with [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). |
 | Error            | <xref:Microsoft.AspNetCore.Components.Web.ErrorEventArgs> | `onerror` |
@@ -92,8 +152,8 @@ Supported <xref:System.EventArgs> are shown in the following table.
 
 ::: moniker range="< aspnetcore-5.0"
 
-| Event            | Class | DOM events and notes |
-| ---------------- | ----- | -------------------- |
+| Event            | Class | [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) events and notes |
+| ---------------- | ----- | --- |
 | Clipboard        | <xref:Microsoft.AspNetCore.Components.Web.ClipboardEventArgs> | `oncut`, `oncopy`, `onpaste` |
 | Drag             | <xref:Microsoft.AspNetCore.Components.Web.DragEventArgs> | `ondrag`, `ondragstart`, `ondragenter`, `ondragleave`, `ondragover`, `ondrop`, `ondragend`<br><br><xref:Microsoft.AspNetCore.Components.Web.DataTransfer> and <xref:Microsoft.AspNetCore.Components.Web.DataTransferItem> hold dragged item data.<br><br>Implement drag and drop in Blazor apps using [JS interop](xref:blazor/call-javascript-from-dotnet) with [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). |
 | Error            | <xref:Microsoft.AspNetCore.Components.Web.ErrorEventArgs> | `onerror` |
@@ -119,80 +179,118 @@ For more information, see the following resources:
 
 ## Lambda expressions
 
-[Lambda expressions](/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions) can also be used:
+[Lambda expressions](/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions) can also be used as the delegate event handler.
+
+`Pages/EventHandlerExample4.razor`:
 
 ```razor
-<button @onclick="@(e => Console.WriteLine("Hello, world!"))">Say hello</button>
+@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";
+}
 ```
 
-It's often convenient to close over additional values, such as when iterating over a set of elements. The following example creates three buttons, each of which calls `UpdateHeading` passing an event argument (<xref:Microsoft.AspNetCore.Components.Web.MouseEventArgs>) and its button number (`buttonNumber`) when selected in the UI:
+It's often convenient to close over additional values using C# method parameters, such as when iterating over a set of elements. The following example creates three buttons, each of which calls `UpdateHeading` passing an event argument (<xref:Microsoft.AspNetCore.Components.Web.MouseEventArgs>) in `e` and its button number in `buttonNumber` when selected in the UI.
+
+`Pages/EventHandlerExample5.razor`:
 
 ```razor
-<h2>@message</h2>
+@page "/event-handler-example-5"
+
+<h1>@heading</h1>
 
 @for (var i = 1; i < 4; i++)
 {
     var buttonNumber = i;
 
-    <button class="btn btn-primary"
-            @onclick="@(e => UpdateHeading(e, buttonNumber))">
-        Button #@i
-    </button>
+    <p>
+        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
+            Button #@i
+        </button>
+    </p>
 }
 
 @code {
-    private string message = "Select a button to learn its position.";
+    private string heading = "Select a button to learn its position";
 
     private void UpdateHeading(MouseEventArgs e, int buttonNumber)
     {
-        message = $"You selected Button #{buttonNumber} at " +
-            $"mouse position: {e.ClientX} X {e.ClientY}.";
+        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
     }
 }
 ```
 
 > [!NOTE]
-> Do **not** use a loop variable directly in a lambda expression, such as `i` in the preceding `for` loop example. Otherwise, the same variable is used by all lambda expressions, which results in use of the same value in all lambdas. Always capture the variable's value in a local variable and then use it. In the preceding example, the loop variable `i` is assigned to `buttonNumber`.
+> Do **not** use a loop variable directly in a lambda expression, such as `i` in the preceding `for` loop example. Otherwise, the same variable is used by all lambda expressions, which results in use of the same value in all lambdas. Always capture the variable's value in a local variable and then use it. In the preceding example:
+>
+> * The loop variable `i` is assigned to `buttonNumber`.
+> * `buttonNumber` is used in the lambda expression.
 
 ## EventCallback
 
-A common scenario with nested components is the desire to run a parent component's method when a child component event occurs. An `onclick` event occurring in the child component is a common use case. To expose events across components, use an <xref:Microsoft.AspNetCore.Components.EventCallback>. A parent component can assign a callback method to a child component's <xref:Microsoft.AspNetCore.Components.EventCallback>.
+A common scenario with nested components executes a parent component's method when a child component event occurs. An `onclick` event occurring in the child component is a common use case. To expose events across components, use an <xref:Microsoft.AspNetCore.Components.EventCallback>. A parent component can assign a callback method to a child component's <xref:Microsoft.AspNetCore.Components.EventCallback>.
+
+The following `Child` component demonstrates how a button's `onclick` handler is set up to receive an <xref:Microsoft.AspNetCore.Components.EventCallback> delegate from the sample's `ParentComponent`. The <xref:Microsoft.AspNetCore.Components.EventCallback> is typed with `MouseEventArgs`, which is appropriate for an `onclick` event from a peripheral device.
 
-The `ChildComponent` in the sample app (`Components/ChildComponent.razor`) demonstrates how a button's `onclick` handler is set up to receive an <xref:Microsoft.AspNetCore.Components.EventCallback> delegate from the sample's `ParentComponent`. The <xref:Microsoft.AspNetCore.Components.EventCallback> is typed with `MouseEventArgs`, which is appropriate for an `onclick` event from a peripheral device:
+`Shared/Child.razor`:
+
+```razor
+<p>
+    <button @onclick="OnClickCallback">
+        Trigger a Parent component method
+    </button>
+</p>
 
-[!code-razor[](~/blazor/common/samples/5.x/BlazorWebAssemblySample/Components/ChildComponent.razor?highlight=5-7,17-18)]
+@code {
+    [Parameter]
+    public string Title { get; set; }
 
-The `ParentComponent` sets the child's <xref:Microsoft.AspNetCore.Components.EventCallback%601> (`OnClickCallback`) to its `ShowMessage` method.
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
 
-`Pages/ParentComponent.razor`:
+    [Parameter]
+    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
+}
+```
+
+The `Parent` component sets the child's <xref:Microsoft.AspNetCore.Components.EventCallback%601> (`OnClickCallback`) to its `ShowMessage` method.
+
+`Pages/Parent.razor`:
 
 ```razor
-@page "/ParentComponent"
+@page "/parent"
 
 <h1>Parent-child example</h1>
 
-<ChildComponent Title="Panel Title from Parent"
-                OnClickCallback="@ShowMessage">
-    Content of the child component is supplied
-    by the parent component.
-</ChildComponent>
+<Child Title="Panel Title from Parent" OnClickCallback="@ShowMessage">
+    Content of the child component is supplied by the parent component.
+</Child>
 
-<p><b>@messageText</b></p>
+<p>@message</p>
 
 @code {
-    private string messageText;
+    private string message;
 
     private void ShowMessage(MouseEventArgs e)
     {
-        messageText = $"Blaze a new trail with Blazor! ({e.ScreenX}, {e.ScreenY})";
+        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
     }
 }
 ```
 
 When the button is selected in the `ChildComponent`:
 
-* The `ParentComponent`'s `ShowMessage` method is called. `messageText` is updated and displayed in the `ParentComponent`.
-* A call to [`StateHasChanged`](xref:blazor/components/lifecycle#state-changes) isn't required in the callback's method (`ShowMessage`). <xref:Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged%2A> is called automatically to rerender the `ParentComponent`, just as child events trigger component rerendering in event handlers that execute within the child. For more information, see <xref:blazor/components/rendering>.
+* The `Parent` component's `ShowMessage` method is called. `message` is updated and displayed in the `Parent` component.
+* A call to [`StateHasChanged`](xref:blazor/components/lifecycle#state-changes) isn't required in the callback's method (`ShowMessage`). <xref:Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged%2A> is called automatically to rerender the `Parent` component, just as child events trigger component rerendering in event handlers that execute within the child. For more information, see <xref:blazor/components/rendering>.
 
 <xref:Microsoft.AspNetCore.Components.EventCallback> and <xref:Microsoft.AspNetCore.Components.EventCallback%601> permit asynchronous delegates. <xref:Microsoft.AspNetCore.Components.EventCallback> is weakly typed and allows passing any type argument in `InvokeAsync(Object)`. <xref:Microsoft.AspNetCore.Components.EventCallback%601> is strongly typed and requires passing a `T` argument in `InvokeAsync(T)` that's assignable to `TValue`.
 
@@ -209,16 +307,22 @@ await OnClickCallback.InvokeAsync(arg);
 
 Use <xref:Microsoft.AspNetCore.Components.EventCallback> and <xref:Microsoft.AspNetCore.Components.EventCallback%601> for event handling and binding component parameters.
 
-Prefer the strongly typed <xref:Microsoft.AspNetCore.Components.EventCallback%601> over <xref:Microsoft.AspNetCore.Components.EventCallback>. <xref:Microsoft.AspNetCore.Components.EventCallback%601> provides better error feedback to users of the component. Similar to other UI event handlers, specifying the event parameter is optional. Use <xref:Microsoft.AspNetCore.Components.EventCallback> when there's no value passed to the callback.
+Prefer the strongly typed <xref:Microsoft.AspNetCore.Components.EventCallback%601> over <xref:Microsoft.AspNetCore.Components.EventCallback>. <xref:Microsoft.AspNetCore.Components.EventCallback%601> provides enhanced error feedback to users of the component. Similar to other UI event handlers, specifying the event parameter is optional. Use <xref:Microsoft.AspNetCore.Components.EventCallback> when there's no value passed to the callback.
 
 ## Prevent default actions
 
-Use the [`@on{EVENT}:preventDefault`](xref:mvc/views/razor#oneventpreventdefault) directive attribute to prevent the default action for an event.
+Use the [`@on{EVENT}:preventDefault`](xref:mvc/views/razor#oneventpreventdefault) directive attribute to prevent the default action for an event, where the `{EVENT}` placeholder is a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) event.
 
-When a key is selected on an input device and the element focus is on a text box, a browser normally displays the key's character in the text box. In the following example, the default behavior is prevented by specifying the `@onkeypress:preventDefault` directive attribute. The counter increments, and the **+** key isn't captured into the `<input>` element's value:
+When a key is selected on an input device and the element focus is on a text box, a browser normally displays the key's character in the text box. In the following example, the default behavior is prevented by specifying the `@onkeydown:preventDefault` directive attribute ([`keydown`](https://developer.mozilla.org/docs/Web/API/Document/keydown_event)). When the focus is on the `<input>` element, the counter increments with the key sequence <kbd>Shift</kbd>+<kbd>+</kbd>. The `+` character isn't assigned to the `<input>` element's value.
+
+`Pages/EventHandlerExample6.razor`:
 
 ```razor
-<input value="@count" @onkeypress="KeyHandler" @onkeypress:preventDefault />
+@page "/event-handler-example-6"
+
+<p>
+    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
+</p>
 
 @code {
     private int count = 0;
@@ -238,40 +342,57 @@ Specifying the `@on{EVENT}:preventDefault` attribute without a value is equivale
 The value of the attribute can also be an expression. In the following example, `shouldPreventDefault` is a `bool` field set to either `true` or `false`:
 
 ```razor
-<input @onkeypress:preventDefault="shouldPreventDefault" />
+<input @onkeydown:preventDefault="shouldPreventDefault" />
+
+...
+
+@code {
+    private bool shouldPreventDefault = true;
+}
 ```
 
 ## Stop event propagation
 
-Use the [`@on{EVENT}:stopPropagation`](xref:mvc/views/razor#oneventstoppropagation) directive attribute to stop event propagation.
+Use the [`@on{EVENT}:stopPropagation`](xref:mvc/views/razor#oneventstoppropagation) directive attribute to stop event propagation, where the `{EVENT}` placeholder is a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) event.
 
-In the following example, selecting the check box prevents click events from the second child `<div>` from propagating to the parent `<div>`:
+In the following example, selecting the check box prevents click events from the second child `<div>` from propagating to the parent `<div>`. Since propagated click events normally fire the `OnSelectParentDiv` method, selecting the second child `<div>` results in the parent div message appearing unless the check box is selected.
+
+`Pages/EventHandlerExample7.razor`:
 
 ```razor
+@page "/event-handler-example-7"
+
 <label>
     <input @bind="stopPropagation" type="checkbox" />
     Stop Propagation
 </label>
 
-<div @onclick="OnSelectParentDiv">
+<div class="m-1 p-1 border border-primary" @onclick="OnSelectParentDiv">
     <h3>Parent div</h3>
 
-    <div @onclick="OnSelectChildDiv">
+    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv">
         Child div that doesn't stop propagation when selected.
     </div>
 
-    <div @onclick="OnSelectChildDiv" @onclick:stopPropagation="stopPropagation">
+    <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 OnSelectParentDiv() => 
-        Console.WriteLine($"The parent div was selected. {DateTime.Now}");
-    private void OnSelectChildDiv() => 
-        Console.WriteLine($"A child div was selected. {DateTime.Now}");
+    private void OnSelectChildDiv() =>
+        message = $"A child div was selected. {DateTime.Now}";
 }
 ```
 
@@ -279,16 +400,24 @@ In the following example, selecting the check box prevents click events from the
 
 ## Focus an element
 
-Call `FocusAsync` on an [element reference](xref:blazor/call-javascript-from-dotnet#capture-references-to-elements) to focus an element in code:
+Call <xref:Microsoft.AspNetCore.Components.ElementReferenceExtensions.FocusAsync%2A> on an [element reference](xref:blazor/call-javascript-from-dotnet#capture-references-to-elements) to focus an element in code. In the following example, select the button to focus the `<input>` element.
+
+`Pages/EventHandlerExample8.razor`:
 
 ```razor
-<input @ref="exampleInput" />
+@page "/event-handler-example-8"
+
+<p>
+    <input @ref="exampleInput" />
+</p>
 
-<button @onclick="ChangeFocus">Focus the Input Element</button>
+<button @onclick="ChangeFocus">
+    Focus the Input Element
+</button>
 
 @code {
     private ElementReference exampleInput;
-	
+
     private async Task ChangeFocus()
     {
         await exampleInput.FocusAsync();

From a26c2e41cd98469f04017d08972e021d90424e3e Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Fri, 12 Mar 2021 05:28:26 -0600
Subject: [PATCH 2/5] Add custom event args for 6.0

---
 .../blazor/components/event-handling.md       | 154 +++++++++++++++++-
 1 file changed, 153 insertions(+), 1 deletion(-)

diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md
index 36764e3564ee..d7543cd41c19 100644
--- a/aspnetcore/blazor/components/event-handling.md
+++ b/aspnetcore/blazor/components/event-handling.md
@@ -99,7 +99,13 @@ In the following example, `UpdateHeading`:
 }
 ```
 
-## Event argument types
+## Event arguments
+
+::: moniker range=">= aspnetcore-6.0"
+
+### Built-in event arguments
+
+::: moniker-end
 
 For some events, event argument types are permitted. Specifying an event parameter in an event method definition is only necessary if the event type is used in the method. In the following example, the `MouseEventArgs` event argument is used in the `ReportPointerLocation` method to set message text.
 
@@ -177,6 +183,152 @@ For more information, see the following resources:
 
 * [MDN web docs: GlobalEventHandlers](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers): Includes information on which HTML elements support each DOM event.
 
+::: moniker range=">= aspnetcore-6.0"
+
+### Custom event arguments
+
+Blazor supports custom event arguments, which enable you to pass arbitrary data to .NET event handlers with custom events.
+
+#### General configuration
+
+Custom events with custom event arguments are generally enabled with the following steps.
+
+1. In JavaScript, define a function for building the custom event argument object from the source event:
+
+   ```javascript
+   function eventArgsCreator(event) { 
+     return {
+       customProperty1: 'any value for property 1',
+       customProperty2: event.srcElement.value
+     };
+   }
+   ```
+
+1. Register the custom event with the above created handler:
+
+   ```javascript
+   Blazor.registerCustomEventType('customevent', {
+     createEventArgs: eventArgsCreator;
+   ```
+
+   > [!NOTE]
+   > The call to `registerCustomEventType` is performed in a JavaScript only once per event.
+
+1. Define a class for the event args:
+
+   ```csharp
+   public class CustomEventArgs : EventArgs{
+       public string CustomProperty1 {get; set;}
+       public string CustomProperty2 {get; set;}
+   }
+   ```
+
+1. Wire up the custom event with the event args by adding an <xref:Microsoft.AspNetCore.Components.EventHandlerAttribute> attribute annotation for the custom event. The class doesn't require any members:
+
+   ```csharp
+   [EventHandler("oncustomevent", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+   static class EventHandlers
+   {
+   }
+   ```
+
+1. Register the event handler on one or more HTML elements. Access the data that was passed in from Javascript in the `HandleCustomEvent` method:
+
+   ```razor
+   <button @oncustomevent="HandleCustomEvent">Handle</button>
+
+   @code
+   {
+       void HandleCustomEvent(CustomEventArgs eventArgs)
+       {
+           // eventArgs.CustomProperty1;
+           // eventArgs.CustomProperty2;
+       }
+   }
+   ```
+
+Whenever the custom event is fired on the DOM, the event handler is called with the data passed from the Javascript.
+
+If you're attempting to fire a custom event, [`bubbles`](https://developer.mozilla.org/docs/Web/API/Event/bubbles) must be enabled by setting its value to `true`. Otherwise, the event doesn't reach the Blazor handler for processing into the C# custom <xref:Microsoft.AspNetCore.Components.EventHandlerAttribute> method. For more information, see [MDN Web Docs: Event bubbling](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_and_triggering_events#event_bubbling).
+
+#### Custom clipboard paste event example
+
+The following example receives a custom clipboard paste event that includes the time of the paste and the user's pasted text.
+
+Declare a custom name (`oncustompaste`) for the event, and a .NET class (`CustomPasteEventArgs`) to hold the event arguments for this event:
+
+`CustomEvents.cs`:
+
+```csharp
+[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; }
+}
+```
+
+Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In the `wwwroot/index.html` or `Pages/_Host.cshtml` file, add the following `<script>` tag and content immediately after the Blazor script (`blazor.webassembly.js` for Blazor WebAssembly or `blazor.server.js` for Blazor Server). The following example only deals with pasting text, but you could use arbitrary JavaScript APIs to deal with users pasting other types of data, such as images.
+
+`wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor script:
+
+```html
+<script>
+    Blazor.registerCustomEventType('custompaste', {
+        browserEventName: 'paste',
+        createEventArgs: event => {
+            return {
+                eventTimestamp: new Date(),
+                pastedData: event.clipboardData.getData('text')
+            };
+        }
+    });
+</script>
+```
+
+The preceding code tells the browser that when a native paste event occurs:
+
+* Raise a `custompaste` event.
+* Supply the event arguments data using your custom logic.
+
+Event name conventions differ between .NET and JavaScript:
+
+* In .NET, event names are prefixed with "`on`".
+* In JavaScript, event names don't have a prefix.
+
+In a Razor component, attach the custom handler to an element.
+
+`Pages/CustomPasteArguments.razor`:
+
+```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}";
+    }
+}
+```
+
+::: moniker-end
+
 ## Lambda expressions
 
 [Lambda expressions](/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions) can also be used as the delegate event handler.

From 579a4b1e92481852ac9ea1cf9985f15a8147515d Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Mon, 15 Mar 2021 07:26:20 -0500
Subject: [PATCH 3/5] Updates

---
 .../blazor/components/event-handling.md       | 61 +++++++++++--------
 aspnetcore/release-notes/aspnetcore-5.0.md    |  2 +-
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md
index d7543cd41c19..157455fb452b 100644
--- a/aspnetcore/blazor/components/event-handling.md
+++ b/aspnetcore/blazor/components/event-handling.md
@@ -5,16 +5,22 @@ description: Learn about Blazor's event handling features, including event argum
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 03/11/2021
+ms.date: 03/15/2021
 no-loc: [appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
 uid: blazor/components/event-handling
 ---
 # ASP.NET Core Blazor event handling
 
-Specify delegate event handlers in Razor component markup with [`@on{EVENT}={DELEGATE}`](xref:mvc/views/razor#onevent) with the following placeholder values:
+Specify delegate event handlers in Razor component markup with [`@on{DOM EVENT}="{DELEGATE}"`](xref:mvc/views/razor#onevent) Razor syntax:
 
-* `{EVENT}` is a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) event (for example, `@onclick`).
-* `{DELEGATE}` is the delegate-typed value.
+* The `{DOM EVENT}` placeholder is a [Document Object Model (DOM) event](https://developer.mozilla.org/docs/Web/Events) (for example, `onclick`).
+* The `{DELEGATE}` placeholder is the C# delegate handler.
+
+Event handling characteristics include the following:
+
+* Asynchronous delegate event handlers that return a <xref:System.Threading.Tasks.Task> are supported.
+* Delegate event handlers automatically trigger a UI render, so there's no need to manually call [StateHasChanged](xref:blazor/components/lifecycle#state-changes).
+* Exceptions are logged.
 
 The following code:
 
@@ -62,8 +68,6 @@ The following code:
 }
 ```
 
-Event handlers can also be asynchronous and return a <xref:System.Threading.Tasks.Task>. There's no need to manually call [StateHasChanged](xref:blazor/components/lifecycle#state-changes). Exceptions are logged when they occur.
-
 In the following example, `UpdateHeading`:
 
 * Is called asynchronously when the button is selected.
@@ -107,7 +111,7 @@ In the following example, `UpdateHeading`:
 
 ::: moniker-end
 
-For some events, event argument types are permitted. Specifying an event parameter in an event method definition is only necessary if the event type is used in the method. In the following example, the `MouseEventArgs` event argument is used in the `ReportPointerLocation` method to set message text.
+For events that support an event argument type, specifying an event parameter in the event method definition is only necessary if the event type is used in the method. In the following example, <xref:Microsoft.AspNetCore.Components.Web.MouseEventArgs> is used in the `ReportPointerLocation` method to set message text that reports the mouse coordinates when the user selects a button in the UI.
 
 `Pages/EventHandlerExample3.razor`:
 
@@ -204,26 +208,30 @@ Custom events with custom event arguments are generally enabled with the followi
    }
    ```
 
-1. Register the custom event with the above created handler:
+1. Register the custom event with the preceding handler in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor script:
 
-   ```javascript
-   Blazor.registerCustomEventType('customevent', {
-     createEventArgs: eventArgsCreator;
+   ```html
+   <script>
+       Blazor.registerCustomEventType('customevent', {
+           createEventArgs: eventArgsCreator;
+       });
+   </script>
    ```
 
    > [!NOTE]
-   > The call to `registerCustomEventType` is performed in a JavaScript only once per event.
+   > The call to `registerCustomEventType` is performed in a script only once per event.
 
-1. Define a class for the event args:
+1. Define a class for the event arguments:
 
    ```csharp
-   public class CustomEventArgs : EventArgs{
+   public class CustomEventArgs : EventArgs
+   {
        public string CustomProperty1 {get; set;}
        public string CustomProperty2 {get; set;}
    }
    ```
 
-1. Wire up the custom event with the event args by adding an <xref:Microsoft.AspNetCore.Components.EventHandlerAttribute> attribute annotation for the custom event. The class doesn't require any members:
+1. Wire up the custom event with the event arguments by adding an <xref:Microsoft.AspNetCore.Components.EventHandlerAttribute> attribute annotation for the custom event. The class doesn't require members:
 
    ```csharp
    [EventHandler("oncustomevent", typeof(CustomEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
@@ -232,7 +240,7 @@ Custom events with custom event arguments are generally enabled with the followi
    }
    ```
 
-1. Register the event handler on one or more HTML elements. Access the data that was passed in from Javascript in the `HandleCustomEvent` method:
+1. Register the event handler on one or more HTML elements. Access the data that was passed in from Javascript in the delegate handler method:
 
    ```razor
    <button @oncustomevent="HandleCustomEvent">Handle</button>
@@ -241,8 +249,8 @@ Custom events with custom event arguments are generally enabled with the followi
    {
        void HandleCustomEvent(CustomEventArgs eventArgs)
        {
-           // eventArgs.CustomProperty1;
-           // eventArgs.CustomProperty2;
+           // eventArgs.CustomProperty1
+           // eventArgs.CustomProperty2
        }
    }
    ```
@@ -255,12 +263,13 @@ If you're attempting to fire a custom event, [`bubbles`](https://developer.mozil
 
 The following example receives a custom clipboard paste event that includes the time of the paste and the user's pasted text.
 
-Declare a custom name (`oncustompaste`) for the event, and a .NET class (`CustomPasteEventArgs`) to hold the event arguments for this event:
+Declare a custom name (`oncustompaste`) for the event and a .NET class (`CustomPasteEventArgs`) to hold the event arguments for this event:
 
 `CustomEvents.cs`:
 
 ```csharp
-[EventHandler("oncustompaste", typeof(CustomPasteEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("oncustompaste", typeof(CustomPasteEventArgs), 
+    enableStopPropagation: true, enablePreventDefault: true)]
 public static class EventHandlers
 {
 }
@@ -272,7 +281,7 @@ public class CustomPasteEventArgs : EventArgs
 }
 ```
 
-Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In the `wwwroot/index.html` or `Pages/_Host.cshtml` file, add the following `<script>` tag and content immediately after the Blazor script (`blazor.webassembly.js` for Blazor WebAssembly or `blazor.server.js` for Blazor Server). The following example only deals with pasting text, but you could use arbitrary JavaScript APIs to deal with users pasting other types of data, such as images.
+Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In the `wwwroot/index.html` or `Pages/_Host.cshtml` file, add the following `<script>` tag and content immediately after the Blazor script. The following example only handles pasting text, but you could use arbitrary JavaScript APIs to deal with users pasting other types of data, such as images.
 
 `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor script:
 
@@ -290,7 +299,7 @@ Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In
 </script>
 ```
 
-The preceding code tells the browser that when a native paste event occurs:
+The preceding code tells the browser that when a native [`paste`](https://developer.mozilla.org/docs/Web/API/Element/paste_event) event occurs:
 
 * Raise a `custompaste` event.
 * Supply the event arguments data using your custom logic.
@@ -463,7 +472,7 @@ Prefer the strongly typed <xref:Microsoft.AspNetCore.Components.EventCallback%60
 
 ## Prevent default actions
 
-Use the [`@on{EVENT}:preventDefault`](xref:mvc/views/razor#oneventpreventdefault) directive attribute to prevent the default action for an event, where the `{EVENT}` placeholder is a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) event.
+Use the [`@on{DOM EVENT}:preventDefault`](xref:mvc/views/razor#oneventpreventdefault) directive attribute to prevent the default action for an event, where the `{DOM EVENT}` placeholder is a [Document Object Model (DOM) event](https://developer.mozilla.org/docs/Web/Events).
 
 When a key is selected on an input device and the element focus is on a text box, a browser normally displays the key's character in the text box. In the following example, the default behavior is prevented by specifying the `@onkeydown:preventDefault` directive attribute ([`keydown`](https://developer.mozilla.org/docs/Web/API/Document/keydown_event)). When the focus is on the `<input>` element, the counter increments with the key sequence <kbd>Shift</kbd>+<kbd>+</kbd>. The `+` character isn't assigned to the `<input>` element's value.
 
@@ -489,9 +498,9 @@ When a key is selected on an input device and the element focus is on a text box
 }
 ```
 
-Specifying the `@on{EVENT}:preventDefault` attribute without a value is equivalent to `@on{EVENT}:preventDefault="true"`.
+Specifying the `@on{DOM EVENT}:preventDefault` attribute without a value is equivalent to `@on{DOM EVENT}:preventDefault="true"`.
 
-The value of the attribute can also be an expression. In the following example, `shouldPreventDefault` is a `bool` field set to either `true` or `false`:
+An expression is also a permitted value of the attribute. In the following example, `shouldPreventDefault` is a `bool` field set to either `true` or `false`:
 
 ```razor
 <input @onkeydown:preventDefault="shouldPreventDefault" />
@@ -505,7 +514,7 @@ The value of the attribute can also be an expression. In the following example,
 
 ## Stop event propagation
 
-Use the [`@on{EVENT}:stopPropagation`](xref:mvc/views/razor#oneventstoppropagation) directive attribute to stop event propagation, where the `{EVENT}` placeholder is a [Document Object Model (DOM)](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) event.
+Use the [`@on{DOM EVENT}:stopPropagation`](xref:mvc/views/razor#oneventstoppropagation) directive attribute to stop event propagation, where the `{DOM EVENT}` placeholder is a [Document Object Model (DOM) event](https://developer.mozilla.org/docs/Web/Events).
 
 In the following example, selecting the check box prevents click events from the second child `<div>` from propagating to the parent `<div>`. Since propagated click events normally fire the `OnSelectParentDiv` method, selecting the second child `<div>` results in the parent div message appearing unless the check box is selected.
 
diff --git a/aspnetcore/release-notes/aspnetcore-5.0.md b/aspnetcore/release-notes/aspnetcore-5.0.md
index 756b9c14a5da..33a3091ad717 100644
--- a/aspnetcore/release-notes/aspnetcore-5.0.md
+++ b/aspnetcore/release-notes/aspnetcore-5.0.md
@@ -135,7 +135,7 @@ Improve the perceived performance of component rendering using the Blazor framew
 
 ### `ontoggle` event support
 
-Blazor events now support the `ontoggle` DOM event. For more information, see <xref:blazor/components/event-handling#event-argument-types>.
+Blazor events now support the `ontoggle` DOM event. For more information, see <xref:blazor/components/event-handling#event-arguments>.
 
 ### Set UI focus in Blazor apps
 

From c1c9ad723fc72d5d830a1a939827eac198f3510d Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Tue, 16 Mar 2021 09:12:01 -0500
Subject: [PATCH 4/5] Updates

---
 .../event-handling/EventHandlerExample1.razor |  36 +++
 .../event-handling/EventHandlerExample2.razor |  25 ++
 .../event-handling/EventHandlerExample3.razor |  21 ++
 .../event-handling/EventHandlerExample4.razor |  13 +
 .../event-handling/EventHandlerExample5.razor |  23 ++
 .../event-handling/EventHandlerExample6.razor |  17 ++
 .../event-handling/EventHandlerExample7.razor |  34 +++
 .../Pages/event-handling/Parent.razor         |  18 ++
 .../Shared/event-handling/Child.razor         |  16 +
 .../3.x/BlazorSample_Server/_Imports.razor    |   1 +
 .../event-handling/EventHandlerExample1.razor |  36 +++
 .../event-handling/EventHandlerExample2.razor |  25 ++
 .../event-handling/EventHandlerExample3.razor |  21 ++
 .../event-handling/EventHandlerExample4.razor |  13 +
 .../event-handling/EventHandlerExample5.razor |  23 ++
 .../event-handling/EventHandlerExample6.razor |  17 ++
 .../event-handling/EventHandlerExample7.razor |  34 +++
 .../Pages/event-handling/Parent.razor         |  18 ++
 .../Shared/event-handling/Child.razor         |  16 +
 .../BlazorSample_WebAssembly/_Imports.razor   |   1 +
 .../event-handling/EventHandlerExample1.razor |  36 +++
 .../event-handling/EventHandlerExample2.razor |  25 ++
 .../event-handling/EventHandlerExample3.razor |  21 ++
 .../event-handling/EventHandlerExample4.razor |  13 +
 .../event-handling/EventHandlerExample5.razor |  23 ++
 .../event-handling/EventHandlerExample6.razor |  17 ++
 .../event-handling/EventHandlerExample7.razor |  34 +++
 .../event-handling/EventHandlerExample8.razor |  18 ++
 .../Pages/event-handling/Parent.razor         |  18 ++
 .../Shared/event-handling/Child.razor         |  16 +
 .../5.x/BlazorSample_Server/_Imports.razor    |   1 +
 .../event-handling/EventHandlerExample1.razor |  36 +++
 .../event-handling/EventHandlerExample2.razor |  25 ++
 .../event-handling/EventHandlerExample3.razor |  21 ++
 .../event-handling/EventHandlerExample4.razor |  13 +
 .../event-handling/EventHandlerExample5.razor |  23 ++
 .../event-handling/EventHandlerExample6.razor |  17 ++
 .../event-handling/EventHandlerExample7.razor |  34 +++
 .../event-handling/EventHandlerExample8.razor |  18 ++
 .../Pages/event-handling/Parent.razor         |  18 ++
 .../Shared/event-handling/Child.razor         |  16 +
 .../BlazorSample_WebAssembly/_Imports.razor   |   1 +
 .../blazor/components/event-handling.md       | 288 +++++-------------
 43 files changed, 928 insertions(+), 212 deletions(-)
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/Parent.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Shared/event-handling/Child.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor
 create mode 100644 aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample8.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/Parent.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Shared/event-handling/Child.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample8.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor
 create mode 100644 aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor

diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor
new file mode 100644
index 000000000000..16edc1913d5e
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor
@@ -0,0 +1,36 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor
new file mode 100644
index 000000000000..b4a920afe315
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor
@@ -0,0 +1,25 @@
+@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}!!!";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor
new file mode 100644
index 000000000000..5e6722a08f21
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor
@@ -0,0 +1,21 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor
new file mode 100644
index 000000000000..8f934b888858
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor
@@ -0,0 +1,13 @@
+@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";
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor
new file mode 100644
index 000000000000..142713395074
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor
@@ -0,0 +1,23 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor
new file mode 100644
index 000000000000..f3ebbf3a2e5b
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor
@@ -0,0 +1,17 @@
+@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++;
+        }
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor
new file mode 100644
index 000000000000..3a2f10db199c
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor
@@ -0,0 +1,34 @@
+@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}";
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/Parent.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/Parent.razor
new file mode 100644
index 000000000000..896aa0cb950d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Pages/event-handling/Parent.razor
@@ -0,0 +1,18 @@
+@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})";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Shared/event-handling/Child.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Shared/event-handling/Child.razor
new file mode 100644
index 000000000000..2cd0eaed242d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/Shared/event-handling/Child.razor
@@ -0,0 +1,16 @@
+<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; }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor
index bda9e18ae1a5..8c18947a0299 100644
--- a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor
@@ -8,3 +8,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
+@using BlazorSample.Shared.event_handing
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor
new file mode 100644
index 000000000000..16edc1913d5e
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor
@@ -0,0 +1,36 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor
new file mode 100644
index 000000000000..b4a920afe315
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor
@@ -0,0 +1,25 @@
+@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}!!!";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor
new file mode 100644
index 000000000000..5e6722a08f21
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor
@@ -0,0 +1,21 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor
new file mode 100644
index 000000000000..8f934b888858
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor
@@ -0,0 +1,13 @@
+@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";
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor
new file mode 100644
index 000000000000..142713395074
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor
@@ -0,0 +1,23 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor
new file mode 100644
index 000000000000..f3ebbf3a2e5b
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor
@@ -0,0 +1,17 @@
+@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++;
+        }
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor
new file mode 100644
index 000000000000..3a2f10db199c
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor
@@ -0,0 +1,34 @@
+@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}";
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor
new file mode 100644
index 000000000000..896aa0cb950d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor
@@ -0,0 +1,18 @@
+@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})";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor
new file mode 100644
index 000000000000..2cd0eaed242d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor
@@ -0,0 +1,16 @@
+<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; }
+}
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor
index f60fe52c7136..c59b5293e8b2 100644
--- a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor
@@ -8,3 +8,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
+@using BlazorSample.Shared.event_handing
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor
new file mode 100644
index 000000000000..16edc1913d5e
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample1.razor
@@ -0,0 +1,36 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor
new file mode 100644
index 000000000000..b4a920afe315
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample2.razor
@@ -0,0 +1,25 @@
+@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}!!!";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor
new file mode 100644
index 000000000000..5e6722a08f21
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample3.razor
@@ -0,0 +1,21 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor
new file mode 100644
index 000000000000..8f934b888858
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample4.razor
@@ -0,0 +1,13 @@
+@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";
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor
new file mode 100644
index 000000000000..142713395074
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample5.razor
@@ -0,0 +1,23 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor
new file mode 100644
index 000000000000..f3ebbf3a2e5b
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample6.razor
@@ -0,0 +1,17 @@
+@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++;
+        }
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor
new file mode 100644
index 000000000000..3a2f10db199c
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample7.razor
@@ -0,0 +1,34 @@
+@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}";
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample8.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample8.razor
new file mode 100644
index 000000000000..5cdd12a376f7
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/EventHandlerExample8.razor
@@ -0,0 +1,18 @@
+@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();
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/Parent.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/Parent.razor
new file mode 100644
index 000000000000..896aa0cb950d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Pages/event-handling/Parent.razor
@@ -0,0 +1,18 @@
+@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})";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Shared/event-handling/Child.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Shared/event-handling/Child.razor
new file mode 100644
index 000000000000..2cd0eaed242d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/Shared/event-handling/Child.razor
@@ -0,0 +1,16 @@
+<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; }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor
index 056a7e23e9bb..be5caaf1a769 100644
--- a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor
@@ -9,3 +9,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
+@using BlazorSample.Shared.event_handing
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor
new file mode 100644
index 000000000000..16edc1913d5e
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor
@@ -0,0 +1,36 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor
new file mode 100644
index 000000000000..b4a920afe315
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor
@@ -0,0 +1,25 @@
+@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}!!!";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor
new file mode 100644
index 000000000000..5e6722a08f21
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor
@@ -0,0 +1,21 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor
new file mode 100644
index 000000000000..8f934b888858
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor
@@ -0,0 +1,13 @@
+@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";
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor
new file mode 100644
index 000000000000..142713395074
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor
@@ -0,0 +1,23 @@
+@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}";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor
new file mode 100644
index 000000000000..f3ebbf3a2e5b
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor
@@ -0,0 +1,17 @@
+@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++;
+        }
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor
new file mode 100644
index 000000000000..3a2f10db199c
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor
@@ -0,0 +1,34 @@
+@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}";
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample8.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample8.razor
new file mode 100644
index 000000000000..5cdd12a376f7
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample8.razor
@@ -0,0 +1,18 @@
+@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();
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor
new file mode 100644
index 000000000000..896aa0cb950d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor
@@ -0,0 +1,18 @@
+@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})";
+    }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor
new file mode 100644
index 000000000000..2cd0eaed242d
--- /dev/null
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor
@@ -0,0 +1,16 @@
+<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; }
+}
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor
index 96b39e0d9091..4f731bbeaaae 100644
--- a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor
@@ -9,3 +9,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
+@using BlazorSample.Shared.event_handing
diff --git a/aspnetcore/blazor/components/event-handling.md b/aspnetcore/blazor/components/event-handling.md
index 157455fb452b..bae730b7b1fb 100644
--- a/aspnetcore/blazor/components/event-handling.md
+++ b/aspnetcore/blazor/components/event-handling.md
@@ -5,7 +5,7 @@ description: Learn about Blazor's event handling features, including event argum
 monikerRange: '>= aspnetcore-3.1'
 ms.author: riande
 ms.custom: mvc
-ms.date: 03/15/2021
+ms.date: 03/16/2021
 no-loc: [appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
 uid: blazor/components/event-handling
 ---
@@ -13,10 +13,10 @@ uid: blazor/components/event-handling
 
 Specify delegate event handlers in Razor component markup with [`@on{DOM EVENT}="{DELEGATE}"`](xref:mvc/views/razor#onevent) Razor syntax:
 
-* The `{DOM EVENT}` placeholder is a [Document Object Model (DOM) event](https://developer.mozilla.org/docs/Web/Events) (for example, `onclick`).
-* The `{DELEGATE}` placeholder is the C# delegate handler.
+* The `{DOM EVENT}` placeholder is a [Document Object Model (DOM) event](https://developer.mozilla.org/docs/Web/Events) (for example, `click`).
+* The `{DELEGATE}` placeholder is the C# delegate event handler.
 
-Event handling characteristics include the following:
+For event handling:
 
 * Asynchronous delegate event handlers that return a <xref:System.Threading.Tasks.Task> are supported.
 * Delegate event handlers automatically trigger a UI render, so there's no need to manually call [StateHasChanged](xref:blazor/components/lifecycle#state-changes).
@@ -29,44 +29,17 @@ The following code:
 
 `Pages/EventHandlerExample1.razor`:
 
-```razor
-@page "/event-handler-example-1"
-
-<h1>@currentHeading</h1>
+::: moniker range=">= aspnetcore-5.0"
 
-<p>
-    <label>
-        New title
-        <input @bind="newHeading" />
-    </label>
-    <button @onclick="UpdateHeading">
-        Update heading
-    </button>
-</p>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor?highlight=10,17,27-30,32-35)]
 
-<p>
-    <label>
-        <input type="checkbox" @onchange="CheckChanged" />
-        @checkedMessage
-    </label>
-</p>
+::: moniker-end
 
-@code {
-    private string currentHeading = "Initial heading";
-    private string newHeading;
-    private string checkedMessage = "Not changed yet";
+::: moniker range="< aspnetcore-5.0"
 
-    private void UpdateHeading()
-    {
-        currentHeading = $"{newHeading}!!!";
-    }
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample1.razor?highlight=10,17,27-30,32-35)]
 
-    private void CheckChanged()
-    {
-        checkedMessage = $"Last changed at {DateTime.Now}";
-    }
-}
-```
+::: moniker-end
 
 In the following example, `UpdateHeading`:
 
@@ -75,33 +48,17 @@ In the following example, `UpdateHeading`:
 
 `Pages/EventHandlerExample2.razor`:
 
-```razor
-@page "/event-handler-example-2"
+::: moniker range=">= aspnetcore-5.0"
 
-<h1>@currentHeading</h1>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor?highlight=10,19-24)]
 
-<p>
-    <label>
-        New title
-        <input @bind="newHeading" />
-    </label>
-    <button @onclick="UpdateHeading">
-        Update heading
-    </button>
-</p>
+::: moniker-end
 
-@code {
-    private string currentHeading = "Initial heading";
-    private string newHeading;
+::: moniker range="< aspnetcore-5.0"
 
-    private async Task UpdateHeading()
-    {
-        await Task.Delay(2000);
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample2.razor?highlight=10,19-24)]
 
-        currentHeading = $"{newHeading}!!!";
-    }
-}
-```
+::: moniker-end
 
 ## Event arguments
 
@@ -115,29 +72,17 @@ For events that support an event argument type, specifying an event parameter in
 
 `Pages/EventHandlerExample3.razor`:
 
-```razor
-@page "/event-handler-example-3"
+::: moniker range=">= aspnetcore-5.0"
 
-@for (var i = 0; i < 4; i++)
-{
-    <p>
-        <button @onclick="ReportPointerLocation">
-            Where's my mouse pointer for this button?
-        </button>
-    </p>
-}
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor?highlight=17-20)]
 
-<p>@mousePointerMessage</p>
+::: moniker-end
 
-@code {
-    private string mousePointerMessage;
+::: moniker range="< aspnetcore-5.0"
 
-    private void ReportPointerLocation(MouseEventArgs e)
-    {
-        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
-    }
-}
-```
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample3.razor?highlight=17-20)]
+
+::: moniker-end
 
 Supported <xref:System.EventArgs> are shown in the following table.
 
@@ -208,7 +153,7 @@ Custom events with custom event arguments are generally enabled with the followi
    }
    ```
 
-1. Register the custom event with the preceding handler in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor script:
+1. Register the custom event with the preceding handler in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Host.cshtml` (Blazor Server) immediately after the Blazor `<script>`:
 
    ```html
    <script>
@@ -302,7 +247,9 @@ Add JavaScript code to supply data for the <xref:System.EventArgs> subclass. In
 The preceding code tells the browser that when a native [`paste`](https://developer.mozilla.org/docs/Web/API/Element/paste_event) event occurs:
 
 * Raise a `custompaste` event.
-* Supply the event arguments data using your custom logic.
+* Supply the event arguments data using the custom logic stated:
+  * For the `eventTimestamp`, create a new date.
+  * For the `pastedData`, get the clipboard data as text. For more information, see [MDN Web Docs: ClipboardEvent.clipboardData](https://developer.mozilla.org/docs/Web/API/ClipboardEvent/clipboardData).
 
 Event name conventions differ between .NET and JavaScript:
 
@@ -340,55 +287,40 @@ In a Razor component, attach the custom handler to an element.
 
 ## Lambda expressions
 
-[Lambda expressions](/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions) can also be used as the delegate event handler.
+[Lambda expressions](/dotnet/csharp/programming-guide/statements-expressions-operators/lambda-expressions) are supported as the delegate event handler.
 
 `Pages/EventHandlerExample4.razor`:
 
-```razor
-@page "/event-handler-example-4"
+::: moniker range=">= aspnetcore-5.0"
 
-<h1>@heading</h1>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor?highlight=6)]
 
-<p>
-    <button @onclick="@(e => heading = "New heading!!!")">
-        Update heading
-    </button>
-</p>
+::: moniker-end
 
-@code {
-    private string heading = "Initial heading";
-}
-```
+::: moniker range="< aspnetcore-5.0"
 
-It's often convenient to close over additional values using C# method parameters, such as when iterating over a set of elements. The following example creates three buttons, each of which calls `UpdateHeading` passing an event argument (<xref:Microsoft.AspNetCore.Components.Web.MouseEventArgs>) in `e` and its button number in `buttonNumber` when selected in the UI.
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample4.razor?highlight=6)]
+
+::: moniker-end
+
+It's often convenient to close over additional values using C# method parameters, such as when iterating over a set of elements. The following example creates three buttons, each of which calls `UpdateHeading` and passes the following data:
+
+* An event argument (<xref:Microsoft.AspNetCore.Components.Web.MouseEventArgs>) in `e`.
+* The button number in `buttonNumber`.
 
 `Pages/EventHandlerExample5.razor`:
 
-```razor
-@page "/event-handler-example-5"
+::: moniker range=">= aspnetcore-5.0"
 
-<h1>@heading</h1>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor?highlight=10,19)]
 
-@for (var i = 1; i < 4; i++)
-{
-    var buttonNumber = i;
+::: moniker-end
 
-    <p>
-        <button @onclick="@(e => UpdateHeading(e, buttonNumber))">
-            Button #@i
-        </button>
-    </p>
-}
+::: moniker range="< aspnetcore-5.0"
 
-@code {
-    private string heading = "Select a button to learn its position";
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample5.razor?highlight=10,19)]
 
-    private void UpdateHeading(MouseEventArgs e, int buttonNumber)
-    {
-        heading = $"Selected #{buttonNumber} at {e.ClientX}:{e.ClientY}";
-    }
-}
-```
+::: moniker-end
 
 > [!NOTE]
 > Do **not** use a loop variable directly in a lambda expression, such as `i` in the preceding `for` loop example. Otherwise, the same variable is used by all lambda expressions, which results in use of the same value in all lambdas. Always capture the variable's value in a local variable and then use it. In the preceding example:
@@ -404,49 +336,33 @@ The following `Child` component demonstrates how a button's `onclick` handler is
 
 `Shared/Child.razor`:
 
-```razor
-<p>
-    <button @onclick="OnClickCallback">
-        Trigger a Parent component method
-    </button>
-</p>
+::: moniker range=">= aspnetcore-5.0"
 
-@code {
-    [Parameter]
-    public string Title { get; set; }
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor)]
 
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
+::: moniker-end
 
-    [Parameter]
-    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
-}
-```
+::: moniker range="< aspnetcore-5.0"
+
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Shared/event-handling/Child.razor)]
+
+::: moniker-end
 
 The `Parent` component sets the child's <xref:Microsoft.AspNetCore.Components.EventCallback%601> (`OnClickCallback`) to its `ShowMessage` method.
 
 `Pages/Parent.razor`:
 
-```razor
-@page "/parent"
+::: moniker range=">= aspnetcore-5.0"
 
-<h1>Parent-child example</h1>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor)]
 
-<Child Title="Panel Title from Parent" OnClickCallback="@ShowMessage">
-    Content of the child component is supplied by the parent component.
-</Child>
+::: moniker-end
 
-<p>@message</p>
+::: moniker range="< aspnetcore-5.0"
 
-@code {
-    private string message;
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/Parent.razor)]
 
-    private void ShowMessage(MouseEventArgs e)
-    {
-        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
-    }
-}
-```
+::: moniker-end
 
 When the button is selected in the `ChildComponent`:
 
@@ -474,29 +390,21 @@ Prefer the strongly typed <xref:Microsoft.AspNetCore.Components.EventCallback%60
 
 Use the [`@on{DOM EVENT}:preventDefault`](xref:mvc/views/razor#oneventpreventdefault) directive attribute to prevent the default action for an event, where the `{DOM EVENT}` placeholder is a [Document Object Model (DOM) event](https://developer.mozilla.org/docs/Web/Events).
 
-When a key is selected on an input device and the element focus is on a text box, a browser normally displays the key's character in the text box. In the following example, the default behavior is prevented by specifying the `@onkeydown:preventDefault` directive attribute ([`keydown`](https://developer.mozilla.org/docs/Web/API/Document/keydown_event)). When the focus is on the `<input>` element, the counter increments with the key sequence <kbd>Shift</kbd>+<kbd>+</kbd>. The `+` character isn't assigned to the `<input>` element's value.
+When a key is selected on an input device and the element focus is on a text box, a browser normally displays the key's character in the text box. In the following example, the default behavior is prevented by specifying the `@onkeydown:preventDefault` directive attribute. When the focus is on the `<input>` element, the counter increments with the key sequence <kbd>Shift</kbd>+<kbd>+</kbd>. The `+` character isn't assigned to the `<input>` element's value. For more information on `keydown`, see [`MDN Web Docs: Document: keydown` event](https://developer.mozilla.org/docs/Web/API/Document/keydown_event).
 
 `Pages/EventHandlerExample6.razor`:
 
-```razor
-@page "/event-handler-example-6"
+::: moniker range=">= aspnetcore-5.0"
 
-<p>
-    <input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />
-</p>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor?highlight=4)]
 
-@code {
-    private int count = 0;
+::: moniker-end
 
-    private void KeyHandler(KeyboardEventArgs e)
-    {
-        if (e.Key == "+")
-        {
-            count++;
-        }
-    }
-}
-```
+::: moniker range="< aspnetcore-5.0"
+
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample6.razor?highlight=4)]
+
+::: moniker-end
 
 Specifying the `@on{DOM EVENT}:preventDefault` attribute without a value is equivalent to `@on{DOM EVENT}:preventDefault="true"`.
 
@@ -520,42 +428,17 @@ In the following example, selecting the check box prevents click events from the
 
 `Pages/EventHandlerExample7.razor`:
 
-```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>
+::: moniker range=">= aspnetcore-5.0"
 
-    <div class="m-1 p-1 border" @onclick="OnSelectChildDiv" 
-            @onclick:stopPropagation="stopPropagation">
-        Child div that stops propagation when selected.
-    </div>
-</div>
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor?highlight=4,15-16)]
 
-<p>
-    @message
-</p>
+::: moniker-end
 
-@code {
-    private bool stopPropagation = false;
-    private string message; 
+::: moniker range="< aspnetcore-5.0"
 
-    private void OnSelectParentDiv() =>
-        message = $"The parent div was selected. {DateTime.Now}";
+[!code-razor[](~/blazor/common/samples/3.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample7.razor?highlight=4,15-16)]
 
-    private void OnSelectChildDiv() =>
-        message = $"A child div was selected. {DateTime.Now}";
-}
-```
+::: moniker-end
 
 ::: moniker range=">= aspnetcore-5.0"
 
@@ -565,25 +448,6 @@ Call <xref:Microsoft.AspNetCore.Components.ElementReferenceExtensions.FocusAsync
 
 `Pages/EventHandlerExample8.razor`:
 
-```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();
-    }
-}
-```
+[!code-razor[](~/blazor/common/samples/5.x/BlazorSample_WebAssembly/Pages/event-handling/EventHandlerExample8.razor?highlight=16)]
 
 ::: moniker-end

From ce605cdd3a78df0cb5a7855228da073c3cdc16e6 Mon Sep 17 00:00:00 2001
From: guardrex <1622880+guardrex@users.noreply.github.com>
Date: Tue, 16 Mar 2021 09:16:52 -0500
Subject: [PATCH 5/5] Updates

---
 .../common/samples/3.x/BlazorSample_Server/_Imports.razor       | 2 +-
 .../common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor  | 2 +-
 .../common/samples/5.x/BlazorSample_Server/_Imports.razor       | 2 +-
 .../common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor
index 8c18947a0299..5430ee8d3617 100644
--- a/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_Server/_Imports.razor
@@ -8,4 +8,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
-@using BlazorSample.Shared.event_handing
+@using BlazorSample.Shared.event_handling
diff --git a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor
index c59b5293e8b2..ab7fded47630 100644
--- a/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/3.x/BlazorSample_WebAssembly/_Imports.razor
@@ -8,4 +8,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
-@using BlazorSample.Shared.event_handing
+@using BlazorSample.Shared.event_handling
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor
index be5caaf1a769..c2739a2fe748 100644
--- a/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_Server/_Imports.razor
@@ -9,4 +9,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
-@using BlazorSample.Shared.event_handing
+@using BlazorSample.Shared.event_handling
diff --git a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor
index 4f731bbeaaae..17dc131b8602 100644
--- a/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor
+++ b/aspnetcore/blazor/common/samples/5.x/BlazorSample_WebAssembly/_Imports.razor
@@ -9,4 +9,4 @@
 @using BlazorSample
 @using BlazorSample.Shared
 @using BlazorSample.Shared.templated_components
-@using BlazorSample.Shared.event_handing
+@using BlazorSample.Shared.event_handling