颜色生成器开发：如何在事件监听器间共享变量？

方案1：将颜色对象提升到共同作用域 #

把currentColor声明在所有事件监听器的外层作用域，让hex/RGB按钮的回调更新这个变量，translate按钮直接复用它：

// 在外层声明变量，保存当前生成的颜色对象
let currentColor = null;

// Hex按钮点击事件
hex.addEventListener('click', function () {
    currentColor = new Color();
    setStylesHex(currentColor);
});

// RGB按钮点击事件（同理改造）
rgb.addEventListener('click', function () {
    currentColor = new Color();
    setStylesRGB(currentColor);
});

// 转换按钮点击事件
trans.addEventListener('click', function() {
    // 先判断是否已有生成的颜色，避免报错
    if (!currentColor) return;
    
    if (head.innerText[0] === '1') {
        setStylesRGB(currentColor);
    } else {
        setStylesHex(currentColor);
    }
})

这个方案简单直接，适合小型项目，缺点是如果项目复杂，全局变量可能带来命名冲突。

方案2：用闭包隔离作用域 #

如果不想污染全局作用域，可以用自执行函数创建闭包，把颜色对象和所有监听器都封装在里面：

(function() {
    let currentColor = null;

    hex.addEventListener('click', function () {
        currentColor = new Color();
        setStylesHex(currentColor);
    });

    rgb.addEventListener('click', function () {
        currentColor = new Color();
        setStylesRGB(currentColor);
    });

    trans.addEventListener('click', function() {
        if (!currentColor) return;
        if (head.innerText[0] === '1') {
            setStylesRGB(currentColor);
        } else {
            setStylesHex(currentColor);
        }
    });
})();

闭包可以避免全局变量污染，同时保证currentColor只在需要的范围内可访问。

方案3：将颜色对象绑定到DOM元素 #

可以把生成的颜色对象存储在DOM元素的自定义属性上，比如页面容器或按钮本身：

hex.addEventListener('click', function () {
    const newColor = new Color();
    // 把颜色对象存储到body的自定义属性
    document.body.dataset.currentColor = newColor;
    setStylesHex(newColor);
});

trans.addEventListener('click', function() {
    const currentColor = document.body.dataset.currentColor;
    if (!currentColor) return;
    
    if (head.innerText[0] === '1') {
        setStylesRGB(currentColor);
    } else {
        setStylesHex(currentColor);
    }
})

这个方案把状态和UI元素绑定，适合需要和DOM强关联的场景，浏览器环境中直接存储对象引用是可行的。

另外注意你原代码里的语法错误：hex.addEventListener (‘click’) function () 应该修正为 hex.addEventListener('click', function ()（缺少逗号分隔参数）。

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