Go编写WASM时调用addEventListener绑定click事件失效问题咨询

1. 第二种写法完全不符合API调用规范 #

addEventListener 是DOM元素的原生实例方法，要求至少传入2个参数：事件名称、回调函数。你写的btn.Call("addEventListener").Set("click", f)没有给方法传任何参数，调用后返回的是无效的undefined值，后续的Set操作完全没有意义，写法本身就是错误的。

2. 第一种写法存在两处潜在问题 #

• 你要复现的目标JS代码本身存在逻辑错误：btn.addEventListener("click",function(event){ f }); 中匿名函数内部只是引用了变量f，没有执行f()调用，就算直接用JS写这段代码也不会触发预期逻辑，正确的目标写法应该是btn.addEventListener("click", f)。
• 你定义的回调函数f中使用了defer f.Release()，这个逻辑在单次触发场景下没问题，但如果希望点击事件可以多次触发，就不能加这行代码：Release方法会销毁该JS函数引用，第一次调用回调后函数就会被释放，后续点击无法再触发逻辑。
• 额外注意：你贴的代码中var Window = js.Global()的定义在回调函数f之后，如果Window是函数内的局部变量，回调执行时会因为Window未初始化报错，建议把全局JS对象的初始化放到代码最前面。

// 优先初始化全局JS对象，避免引用空值
var Window = js.Global()

func main() {
    // 定义事件回调
    f := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        // 如果事件只需要触发一次可以保留下面的注释，需要多次触发就删除defer逻辑
        // defer f.Release()
        // args[0] 对应JS中的event事件对象
        Window.Call("alert", "Hello World from addEventListener")
        return nil
    })

    document := Window.Get("document")
    btn := document.Call("createElement", "button")
    btn.Set("innerText", "Click me")
    btn.Get("style").Call("setProperty", "background-color", "blue")
    // 正确调用addEventListener方法传参
    btn.Call("addEventListener", "click", f)
    document.Get("body").Call("appendChild", btn)
}

内容的提问来源于stack exchange，提问作者Hasan A Yousef