on

動的な EventHandler を作成する簡単なマクロ。

構文

{on [ename:]event-type [at tname[:target-type]] do body }

event-type は、処理される Event の型です。event-type である Event はすべてこのハンドラの指定と合致します。

body は、プロシージャ本体と同じ構文規則に従う 1 つ以上の一連の Curl 式です。その内部で変数 ename:event-typeおよび tname:target-type の一方または両方が指定された場合は、それぞれ関連する Event および EventTarget にバインドされます。

例

次の例は、ポインタが入るとそれ自体が緑に変わり、ポインタが出ると赤に変わる RectangleGraphic を作成します。

例: PointerEnter と PointerLeave イベント時に色の変更を実行

{RectangleGraphic
    width=2in,
    height=2in,
    fill-color="blue",
    {on PointerEnter at r:RectangleGraphic do
        set r.fill-color = "green"
    },
    {on PointerLeave at r:RectangleGraphic do
        set r.fill-color = "red"
    }
}

次の例も同様ですが、さらに PointerMotion イベントもインターセプトして、それを使用してキャンバスの内容を変更します。

例: PointerMotion　のトラッキング： PointerEnter と PointerLeave イベント時に色の変更を実行

{value
    let f:Frame =
        {Frame horigin="left", vorigin="top", margin=2pt}
    let c:Canvas =
        {Canvas
            width=10cm,
            height=4cm,
            background="blue",
            {on PointerEnter at g:Graphic do
                set g.background = "green"
            },
            {on PointerLeave at g:Graphic do
                set g.background = "red"
            },
            {on e:PointerMotion do
                {f.add replace?=true,
                    {huge {bold {format "(%s,%s)", e.x, e.y}}}
                }
            }
        }
    {c.add f, x=0, y=0}
    c
}