Blazor - イベントハンドリングのソースを表示

== 概要 ==

<br><br>

== イベントハンドリング ==
Blazorでは、様々なイベントを処理することができる。<br>
<br>
==== クリックイベント ====
 <syntaxhighlight lang="c#">
 <button @onclick="HandleClick">Click me</button>
 
 @code {
    private void HandleClick()
    {  // クリック時の処理
 
    }
 }
 </syntaxhighlight>
<br>
==== キーボードイベント ====
 <syntaxhighlight lang="c#">
 <input @onkeypress="HandleKeyPress" />
 
 @code {
    private void HandleKeyPress(KeyboardEventArgs e)
    {
       // キー入力時の処理
       if (e.Key == "Enter")
       {
          // Enterキーが押された時の処理
       }
    }
 }
 </syntaxhighlight>
<br>
==== フォーカスイベント ====
 <syntaxhighlight lang="c#">
 <input @onfocus="HandleFocus" @onblur="HandleBlur" />
 
 @code {
    // イベント引数を使用した処理
    private async Task HandleClick(MouseEventArgs e)
    {
       // マウスの位置情報等にもアクセス可能
       var x = e.ClientX;
       var y = e.ClientY;
    }
 }
 </syntaxhighlight>
<br><br>

== イベントの修飾子 ==
==== イベントの伝播を停止 ====
 <syntaxhighlight lang="c#">
 <button @onclick:stopPropagation="true">
 </syntaxhighlight>
<br>
==== デフォルトの動作を防止 ====
 <syntaxhighlight lang="c#">
 <button @onclick:preventDefault="true">
 </syntaxhighlight>
<br>
==== Enterキーのみ有効化 ====
 <syntaxhighlight lang="c#">
 <input @onkeypress:preventDefault="true"  @onkeypress="HandleEnterKey" />
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]