From aaccc22bd38c7d66f2fd26282e6183d86fa670d2 Mon Sep 17 00:00:00 2001 From: KazuwoKiwame12 <39262724+KazuwoKiwame12@users.noreply.github.com> Date: Fri, 8 Oct 2021 12:26:09 +0900 Subject: [PATCH 1/3] fix(go-webassembly): js.NewCallback to js.Funcof --- go-webassembly/3_clickevent/main.go | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 }) // イベントリスナーの登録 From 26edf6a65b2ef8fa888c0a3f98d2c6929b907f79 Mon Sep 17 00:00:00 2001 From: KazuwoKiwame12 <39262724+KazuwoKiwame12@users.noreply.github.com> Date: Fri, 8 Oct 2021 12:26:28 +0900 Subject: [PATCH 2/3] docs(docs): repair document --- docs/go-webassembly/index.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/go-webassembly/index.html b/docs/go-webassembly/index.html index 3f38378..2082488 100644 --- a/docs/go-webassembly/index.html +++ b/docs/go-webassembly/index.html @@ -310,9 +310,10 @@
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
関数を用いるとよいでしょう。