Blazor中的事件处理

同javascript一样，Blazor也支持DOM上的事件，比如onclick，onfocus，onblur等，但与javascript的写法又有些不一样。

直接使用@οnclick=“函数名” 就行了

Test
@code {
    private void Test()
    {
        Console.WriteLine("test button clicked");
    }
}

DOM的事件通常都带有EventArgs，里面包含了一些与事件相关的信息，Blazor也不例外，她包含一个隐式的EventArgs。对于上面的例子，可以修改函数，增加参数MouseEventArgs：

Test
@code {
    private void Test(MouseEventArgs e)
    {
        Console.WriteLine("test button clicked");
    }
}

这里click事件对应的是MouseEventArgs，完整的列表以及各参数包含的属性可以参考官方文档：
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-3.1

如果函数有自定义参数，则需要使用Lambda方式来调用：

Test
@code {
    private void Test(string name)
    {
        Console.WriteLine("test button clicked:"+name);
    }
}

JavaScript里面可以通过调用EventArgs的preventDefault函数来阻止事件默认的行为，Blazor里面略有不同，要通过 @on{EVENT}:preventDefault的声明方式来实现。以下代码将阻止所有的键盘输入：

@code {
    private void KeyPress(KeyboardEventArgs e)
    {        
    }
}

@on{EVENT}:preventDefault 还可以是一个表达式或者变量，将上面的例子稍作修改，如下代码只阻止 “@” 符号的输入:

@code {
    bool shouldPreventDefault = true;
    private void KeyPress(KeyboardEventArgs e)
    {
        shouldPreventDefault = (e.Key == "@");
    }
}

除了@on{EVENT}:preventDefault，Blazor还提供 @on{EVENT}:stopPropagation ，可以用来阻止事件冒泡，具体用法和preventDefault一样，就不再赘述了。