DEV Community 👩‍💻👨‍💻

kaede
kaede

Posted on

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

前提

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

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>
Enter fullscreen mode Exit fullscreen mode
  mouseEnter() {
    print("mouseEnter");
  }
  mouseLeave() {
    print("mouseLeave");
  }
Enter fullscreen mode Exit fullscreen mode
<h1
    (mouseover)="mouseOver()"
    (mouseout)="mouseOut()"
    >ホバーされるエレメント2 over or out
</h1>
Enter fullscreen mode Exit fullscreen mode
  mouseOver() {
    print("mouseOver");
  }
  mouseOut() {
    print("mouseOut");
  }
Enter fullscreen mode Exit fullscreen mode

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

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

自分の環境では未検証。


エレメントがクリックされた時

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

<h1
    (click)="(handleClick)"
    >クリックされるエレメント
</h1>
Enter fullscreen mode Exit fullscreen mode
  handleClick() {
    print("Clicked");
  }
Enter fullscreen mode Exit fullscreen mode

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


エレメントからカーソルが外れて外部がクリックされた時(ブラー)

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

<input
  (blur)="(handleBlur)"
  placeholder="外がクリックされるエレメント"
>
Enter fullscreen mode Exit fullscreen mode
  handleBlur() {
    print("Clicked Outside");
  }
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)

Find and follow new tags! 🤔 Did you know?   DEV has a variety of tags to help you find the content you like. Find and follow your favorite tags