Golang WebAssembly中如何调用JavaScript事件

Golang WebAssembly中如何调用JavaScript事件 在 JavaScript 中，事件非常常见，可以这样调用：

<p id="p_id">
</p><button id="some_id">Click me</button>

var element=document.querySelector("#some_id")
var listener=element.addEventListener('click',function(event){
     document.querySelector("#p_id").innerHTML = "Hello World";
 });

// 或者
<p id="p_id">
<button onclick="some_function()">Click me</button>

<script>
function some_function() {
  document.querySelector("#p_id").innerHTML = "Hello World";
}

我知道对于典型的 JS 函数，我们可以在 Go 中使用 js.Global().Get().Call() 和 js.Global().Get().Invoke()，如下所示：

//go:build js && wasm

package main

import (
	"syscall/js"
)

var (
	document js.Value
)

func init() {
	document = js.Global().Get("document")

}

func main() {
	c := make(chan int) // 用于保持 wasm 运行的通道，它不像 rust/c/c++ 中那样是一个库，所以我们需要保持二进制文件运行

    alert := js.Global().Get("alert")
	alert.Invoke("Hi")

    h1 := document.Call("createElement", "h1")
	h1.Set("innerText", "This is H1")
	h1.Get("style").Call("setProperty", "background-color", "blue")

	<-c
}

要从 Go 添加 eventListner，我知道我们可以这样做：

var cb js.Func
cb = js.FuncOf(func(this js.Value, args []js.Value) interface{} {
	fmt.Println("button clicked")
	cb.Release() // 如果按钮不会再被点击，则释放该函数
	return nil
})
js.Global().Get("document").Call("getElementById", "myButton").Call("addEventListener", "click", cb)

我正在寻找的是，如何从 Go 响应在 JavaScript 中触发的事件。

更新 我正在寻找的是，如何从 Go 响应在 JavaScript 中触发的事件。

总结一下，我如何编写一个 go 代码来实现下面 JavaScript 代码相同的功能（该代码使用了 IndexedDB API）：

function remove() {
    var request = db.transaction(["employee"], "readwrite")
    .objectStore("employee")
    .delete("00-03");

    request.onsuccess = function(event) {
       alert("Kenny's entry has been removed from your database.");
    };
 }

有什么想法吗？


更多关于Golang WebAssembly中如何调用JavaScript事件的实战教程也可以访问 https://www.itying.com/category-94-b0.html

1 回复

更多关于Golang WebAssembly中如何调用JavaScript事件的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


在Go WebAssembly中响应JavaScript事件，可以通过js.FuncOf创建回调函数并赋值给JavaScript对象的属性。以下是针对IndexedDB删除操作的完整示例：

//go:build js && wasm

package main

import (
    "syscall/js"
)

func main() {
    // 保持WASM运行
    done := make(chan struct{})
    
    // 定义删除函数
    js.Global().Set("removeFromGo", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        goRemove()
        return nil
    }))
    
    <-done
}

func goRemove() {
    // 获取全局db对象（假设已在JS中初始化）
    db := js.Global().Get("db")
    
    // 创建事务
    transaction := db.Call("transaction", js.ValueOf([]interface{}{"employee"}), js.ValueOf("readwrite"))
    
    // 获取对象存储
    objectStore := transaction.Call("objectStore", "employee")
    
    // 执行删除
    request := objectStore.Call("delete", "00-03")
    
    // 设置onsuccess回调
    request.Set("onsuccess", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        js.Global().Call("alert", "Kenny's entry has been removed from your database.")
        return nil
    }))
    
    // 设置onerror回调（可选）
    request.Set("onerror", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        js.Global().Call("alert", "Delete operation failed")
        return nil
    }))
}

对应的HTML调用方式：

<button onclick="removeFromGo()">Remove Entry</button>

或者通过事件监听器方式：

// 在Go中设置事件监听器
js.Global().Get("document").
    Call("getElementById", "removeBtn").
    Call("addEventListener", "click", js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        goRemove()
        return nil
    }))

对于通用的事件响应模式：

// 创建事件回调
eventCallback := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
    if len(args) > 0 {
        event := args[0]
        // 访问事件属性
        eventType := event.Get("type").String()
        target := event.Get("target")
        fmt.Printf("Event type: %s, Target ID: %s\n", 
            eventType, target.Get("id").String())
    }
    
    // 执行Go逻辑
    handleEvent()
    
    return nil
})

// 绑定到事件
js.Global().Get("document").
    Call("getElementById", "myElement").
    Call("addEventListener", "click", eventCallback)

// 清理函数（需要时调用）
// eventCallback.Release()

关键点：

  1. 使用js.FuncOf创建Go函数作为JavaScript回调
  2. 通过Set方法将回调赋值给onsuccess、onerror等事件属性
  3. 事件参数通过args[0]访问，包含完整的JavaScript事件对象
  4. 确保在适当的时候调用Release()避免内存泄漏
回到顶部