ドキュメント/ウィンドウのリスニング
これまでは<button>
のようなDOM要素から発生したイベントを扱ってきましたが、グローバルイベントをリスニングする必要がある場合はどうすればよいでしょうか?
一般的なグローバルイベントには、document
のmousemove
イベントやwindow
のscroll
イベントなどがあります。
Qwikには、グローバルイベントをリスニングするためのdocument:
およびwindow:
名前空間プレフィックスがあります。
ブラウザのコンソールを開き、サンプルのテキストの上にマウスを移動してください。マウスの移動に合わせて、マウスの位置がコンソールに記録されることがわかります。このログは、テキスト上にマウスを移動している間だけ発生します。これは、イベントがdiv
のonMouseMove
イベントに接続されているためです。このレベルでアタッチすると、要素のリスナーを超えてイベントのバブリングが停止します。
マウスの位置を常に記録するには、コードをどのように調整すればよいでしょうか?
onMouseMove
宣言にdocument:
プレフィックスを追加して、グローバルリスナーに変更します。
この変更により、アプリケーションのどこでマウスを移動しても(テキストの外側でも)、コンソールに出力が表示されるようになります。
チュートリアルの編集