如何在通用函数调用中替代已弃用的window.event？

要解决window.event被弃用的警告，同时兼容HTML onclick调用（可传参/不传参）和直接JS调用的场景，我们可以通过调整函数参数逻辑，改用标准的事件对象传入方式来实现：

核心思路 #

1. 让函数支持两种调用模式：
   • 从HTML onclick调用时，传入event对象作为第一个参数，通过event.target获取元素内容
   • 直接JS调用时，传入要复制的文本作为第一个参数，可选传入提示信息
2. 移除对非标准window.event的依赖，改用标准事件参数传递
3. 增加异步复制的错误处理，提升稳定性

完整代码示例 #

HTML 代码

<div onclick="copyToClipboard(event)">No parameter</div>
<div onclick="copyToClipboard('Foo')">Parameter defined</div>
<div onclick="copyToClipboard('Foo', 'Bar')">Parameter defined, message defined</div>

JavaScript 代码

window.copyToClipboard = function (input, message) {
    let text;
    // 判断输入是否为事件对象：处理HTML onclick传入event的情况
    if (input instanceof Event) {
        text = input.target.innerHTML;
    } else {
        text = input;
    }

    // 处理未提供复制内容的异常情况
    if (text == null) {
        console.error('未指定要复制的内容，且未找到事件源');
        return;
    }

    // 设置默认提示信息
    if (message == null) {
        message = `"${text}"`;
    }

    // 异步执行剪贴板写入，增加错误捕获
    navigator.clipboard.writeText(text)
        .then(() => {
            console.log(`已复制 ${message} 到剪贴板`);
        })
        .catch(err => {
            console.error('复制失败：', err);
        });
}

关键说明 #

• 兼容两种调用方式：当第一个参数是Event类型时，自动取触发元素的内容；否则将其视为要复制的文本，完全支持copyToClipboard('foobar')这类直接调用
• 替代弃用API：不再依赖非标准的window.event，改用HTML onclick中显式传入的event对象，符合现代浏览器标准
• 错误处理：增加了对未提供内容的异常提示，以及剪贴板操作的失败捕获，避免静默错误

内容的提问来源于stack exchange，提问作者Myles Duncan-King