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

前提

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

Angular Dart는 마이너로、
Web 上でさくっと実行できる사이트가 아닌데로

Element니마우스가被さった時(ホバー)

https://gray-code.com/javascript/event-list-of-mouse/

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

들어가다 와 나가다
명백한 と 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");
  }

こうやってnestされていないconsポーネntの場合は,
마우스오버, 마우스아웃
であろうとも反応するが,

要素がnestになっている場合は、
마우스\입력, 마우스\떠나기
これらのみ反応する.

自分の環境では未検証.

ELEMENT가크리크사레타시

https://angulardart.xyz/guide/user-input#binding-to-user-input-events

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

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

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

ELEMENT로부터 카솔이 외측이라고 외부가 크리크사레타시(브라)

https://angulardart.xyz/guide/user-input#on-blur

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

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

こちらは入力できるelementのみ,
ELEMENT에서 カーソルが外れて外部がクリックされた時に発動できる.

formy に入力 し ていて、外側をクリックしたら保存されて欲しい시계に便利そう.