JavaScript中CustomEvent传递变量异常问题求助

你遇到的问题核心是基本类型的值传递特性：当你创建CustomEvent时，detail.myVar存储的是testVar当时的数值5——因为Number是基本类型，赋值时会直接拷贝值，而不是引用。后续修改testVar的数值，不会影响已经创建好的事件对象里的detail内容，所以两次触发事件都会输出5。

解决方法一：每次触发前重新创建事件 #

如果不需要复用同一个事件实例，最简单的方式是每次触发事件时，重新创建CustomEvent，这样每次都会获取testVar的当前值：

var testVar = 5;

addEventListener('testEvent', (e) => {
    console.log("testVar:" + e.detail.myVar)
})

// 第一次触发
dispatchEvent(new CustomEvent('testEvent', {
    detail: { myVar: testVar }
}))

testVar = 2;

// 第二次触发，重新生成事件
dispatchEvent(new CustomEvent('testEvent', {
    detail: { myVar: testVar }
}))

解决方法二：用引用类型传递变量 #

如果需要复用同一个事件实例，可以把testVar放在一个对象里（对象是引用类型），这样事件detail里存储的是对象的引用，修改对象的属性会同步反映到事件的detail中：

var testObj = { value: 5 };

const myEvent = new CustomEvent('testEvent', {
    detail: { myVar: testObj }
})

addEventListener('testEvent', (e) => {
    console.log("testVar:" + e.detail.myVar.value)
})

dispatchEvent(myEvent)
testObj.value = 2
dispatchEvent(myEvent)

这两种方法都能实现你想要的输出效果，可根据实际场景选择：

• 方法一逻辑简单，适合单次或少量触发的场景；
• 方法二更适合需要多次复用同一事件实例的场景，但要注意对象引用可能带来的意外修改问题。

内容的提问来源于stack exchange，提问作者Pixel2203