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 @@

DOMの操作

message := window.Get("document").Call("getElementById", "message") // イベントリスナーとして登録するコールバックを作成 - cb := js.NewCallback(func(args []js.Value) { - // HTMLを変更する - message.Set("innerHTML", "Clicked!!") + 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関数を用いるとよいでしょう。

- From 559b0f6f072eb53c0156183bc618d8697877233e Mon Sep 17 00:00:00 2001 From: KazuwoKiwame12 <39262724+KazuwoKiwame12@users.noreply.github.com> Date: Fri, 8 Oct 2021 12:39:49 +0900 Subject: [PATCH 3/3] style(docs): fix indent --- docs/go-webassembly/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/go-webassembly/index.html b/docs/go-webassembly/index.html index 2082488..8083037 100644 --- a/docs/go-webassembly/index.html +++ b/docs/go-webassembly/index.html @@ -311,9 +311,9 @@

DOMの操作

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