diff --git a/docs/go-webassembly/index.html b/docs/go-webassembly/index.html index 3f38378..8083037 100644 --- a/docs/go-webassembly/index.html +++ b/docs/go-webassembly/index.html @@ -310,9 +310,10 @@

DOMの操作

message := window.Get("document").Call("getElementById", "message") // イベントリスナーとして登録するコールバックを作成 - cb := js.NewCallback(func(args []js.Value) { + cb := js.FuncOf(func(this js.Value, args []js.Value) interface{} { // HTMLを変更する message.Set("innerHTML", "Clicked!!") + return nil }) // イベントリスナーの登録 @@ -324,14 +325,12 @@

DOMの操作

}

getElementByIdでHTMLの要素を取得する部分は、2_domのサンプルとあまり変わりはありません。しかし、このサンプルでは取得したHTMLの要素にクリックイベントのリスナーを設定しています。

クリックイベントをハンドリングするには、JavaScriptで書いた例と同様に、addEventListenerメソッドを呼び出し、クリックイベントのイベントリスナーとしてコールバック関数を登録する必要があります。

-

コールバック関数は、Goの世界の関数をJavaScriptの世界の関数としてaddEventListenerメソッドに渡す必要があるため、単純なGoの関数ではなく、syscall/jsパッケージのjs.Callback型として定義する必要があります。js.Callback型の値は、js.NewCallback関数を用いることで作成することができます。作成したコールバック関数はaddEventListenerメソッドの引数として渡しています。

+

コールバック関数は、Goの世界の関数をJavaScriptの世界の関数としてaddEventListenerメソッドに渡す必要があるため、単純なGoの関数ではなく、syscall/jsパッケージのjs.Func型として定義する必要があります。js.Func型の値は、js.FuncOf関数を用いることで作成することができます。作成したコールバック関数はaddEventListenerメソッドの引数として渡しています。

main関数の最後にあるselect{}main関数をブロックする役目があります。JavaScript側で発生したクリックイベントは、syscall/jsパッケージで管理されているイベントループに通知されます。

イベントループのゴールーチンはmain関数が動いているゴールーチンは別ですが、main関数のゴールーチンが終わってしまうとGoで書いたプログラム自体が終了するため、イベントループのゴールーチンも一緒に終了してしまいます。Goのプログラムが終わってしまうとJavaScript側はイベントをハンドリングしてくれる相手がいないため、エラーを発生させます。

-

ここではクリックイベントについて紹介しましたが、その他のイベントについても同様にハンドリングすることができます。また、preventDefaultなどの処理をしたい場合には、js.NewEventCallback関数を用いるとよいでしょう。

- diff --git a/go-webassembly/3_clickevent/main.go b/go-webassembly/3_clickevent/main.go index 9693999..75f5356 100644 --- a/go-webassembly/3_clickevent/main.go +++ b/go-webassembly/3_clickevent/main.go @@ -10,9 +10,10 @@ func main() { message := window.Get("document").Call("getElementById", "message") // イベントリスナーとして登録するコールバックを作成 - cb := js.NewCallback(func(args []js.Value) { + cb := js.FuncOf(func(this js.Value, args []js.Value) interface{} { // HTMLを変更する message.Set("innerHTML", "Clicked!!") + return nil }) // イベントリスナーの登録