Angular Dart 基礎 -- Part 01 マウスイベントの処理

前提

前回の記事で環境構築ができていること。

Angular Dart はマイナーで、
Web 上でさくっと実行できるサイトがないので

Angular Dart の記事はなかったが、
HTML 要素の記事を参考に調べた。

enter と leave
overt と out

これらのイベントが書けるのを確認した。

<h1 (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" >ホバーされるエレメント enter or leave </h1>

 mouseEnter() { print("mouseEnter"); } mouseLeave() { print("mouseLeave"); }

<h1 (mouseover)="mouseOver()" (mouseout)="mouseOut()" >ホバーされるエレメント2 over or out </h1>

 mouseOver() { print("mouseOver"); } mouseOut() { print("mouseOut"); }

こうやってネストされていないコンポーネントの場合は、
mouse\over, mouse\out
であろうとも反応するが、

要素がネストになっている場合は、
mouse\enter, mouse\leave
これらのみ反応する。

自分の環境では未検証。

<h1 (click)="(handleClick)" >クリックされるエレメント </h1>

 handleClick() { print("Clicked"); }

このように、click に () をつけて関数名を渡せば
クリックされた時に dart 側に定義した関数が実行できる。

<input (blur)="(handleBlur)" placeholder="外がクリックされるエレメント" >

 handleBlur() { print("Clicked Outside"); }

こちらは入力できるエレメントのみ、
エレメントからカーソルが外れて外部がクリックされた時に発動できる。

フォームに入力していて、外側をクリックしたら保存されて欲しい時に便利そう。