前提
前回の記事で環境構築ができていること。
Angular Dart はマイナーで、
Web 上でさくっと実行できるサイトがないので
エレメントにマウスが被さった時(ホバー)
https://gray-code.com/javascript/event-list-of-mouse/
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
これらのみ反応する。
自分の環境では未検証。
エレメントがクリックされた時
https://angulardart.xyz/guide/user-input#binding-to-user-input-events
<h1
(click)="(handleClick)"
>クリックされるエレメント
</h1>
handleClick() {
print("Clicked");
}
このように、click に () をつけて関数名を渡せば
クリックされた時に dart 側に定義した関数が実行できる。
エレメントからカーソルが外れて外部がクリックされた時(ブラー)
https://angulardart.xyz/guide/user-input#on-blur
<input
(blur)="(handleBlur)"
placeholder="外がクリックされるエレメント"
>
handleBlur() {
print("Clicked Outside");
}
こちらは入力できるエレメントのみ、
エレメントからカーソルが外れて外部がクリックされた時に発動できる。
フォームに入力していて、外側をクリックしたら保存されて欲しい時に便利そう。
Top comments (0)