kaede

Posted on Oct 8, 2022

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

#angular #dart

前提

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

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");
  }

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

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