发布时间：2025 年 9 月 23 日
clipboardchange 事件是 Microsoft Edge 团队添加到 Chrome 中的一项新功能。这样，您就可以高效地监控剪贴板更改，而不会产生轮询带来的性能开销。
您现在可以在 Chrome 和 Edge 中通过源试用测试 clipboardchange 事件，从版本 140 开始。
我们欢迎您在测试这项新功能时提供任何反馈，因为我们最终希望将其标准化。
轮询剪贴板以检测更改的挑战
如需了解系统剪贴板中可用的内容，您必须使用低效的轮询方法。例如，文本编辑 Web 应用可能希望根据剪贴板中包含的是文本、图片还是 HTML 内容，启用不同的“粘贴”按钮。
目前实现此目的的方法需要您反复调用 navigator.clipboard.read() 方法来检查剪贴板内容，如以下代码段所示：
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
虽然这种方法可行，但也存在明显的缺点。
性能影响
不断轮询剪贴板会产生不必要的开销。每次调用 navigator.clipboard.read() 都需要系统级剪贴板访问权限，这可能会对应用的性能产生负面影响，尤其是在资源受限的设备上。轮询频率需要在响应速度和性能之间进行权衡取舍。
耗电过快
在移动设备上，频繁轮询剪贴板可能会导致电池电量耗尽，因为即使在用户未主动复制或粘贴内容时，应用也会持续访问系统资源。
用户体验不一致
轮询间隔会在复制内容的时间与界面更新以反映新的剪贴板状态的时间之间造成延迟。用户可能会看到过时的粘贴按钮状态，或者在短时间内无法使用正确的选项。
过度轮询带来的隐私问题
频繁访问剪贴板可能会引发隐私权问题，因为即使剪贴板数据没有变化，应用也会持续读取剪贴板数据。对于注重剪贴板内容隐私的用户来说，这可能会让他们感到不安。
clipboardchange 事件
为了应对这些挑战，我们实现了一个名为 clipboardchange 的新事件，并将在 Edge 和 Chrome 中启动源试用，以便您在应用中对其进行测试。
此事件可让 Web 应用被动地响应剪贴板更改，而不是主动轮询这些更改。当内容从任何应用复制或剪切到剪贴板、剪贴板被清空或粘贴内容（在某些情况下可能会清空剪贴板）时，系统会自动触发该事件。该事件仅在文档获得焦点时触发。
您可以通过在 navigator.clipboard 接口上添加监听器来监听 clipboardchange 事件，如下所示：
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
主要优点
与轮询相比，clipboardchange 事件具有多项优势：
- 高效：仅在实际发生变化时触发事件。
- 保护隐私：该事件仅公开原生 MIME 类型，而不公开实际内容。
- 无权限提示：由于未公开任何敏感数据，因此无需用户权限。
- 实时响应：当剪贴板中的内容发生变化时，界面会立即更新。
- 关注焦点：仅当文档具有焦点时才触发事件。
types 属性
clipboardchange 事件对象包含一个 types 属性，其中包含剪贴板中可用的 MIME 类型数组：
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
焦点行为
如果剪贴板在文档未处于焦点状态时发生更改，则当文档重新获得系统焦点时，系统会触发单个 clipboardchange 事件。历史剪贴板更改信息将不可用，只有当页面获得焦点时可用的类型才会包含在 types 成员中。
测试今天的 clipboardchange 事件
您可以立即测试新的 clipboardchange 事件：
- 或者仅在浏览器中启用该功能，从而在本地使用。
- 或者，在正式版 Web 应用中注册源试用。
检测 clipboardchange 事件以提高兼容性
首先，由于这是一项新功能，您需要在使用它之前检测其支持情况。您可以通过测试 navigator.clipboard 上是否存在 onclipboardchange 属性来实现此目的，如下所示：
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
在本地测试
如需仅在浏览器中测试 clipboardchange 事件，请执行以下操作：
- 打开
about://flags页面。 - 在搜索标志框中搜索
ClipboardChangeEvent。 - 使用下拉菜单将值从默认更改为已启用。
- 重新启动浏览器。
报名参加源试用
如需在您的网站上针对真实用户试用 clipboardchange 事件，请在 Chrome 或 Edge 中注册源试用。源试用将在 Chrome 和 Edge 中进行，版本介于 140 和 142 之间（2025 年 9 月 2 日至 2025 年 12 月 2 日）。
请参阅源试用入门，详细了解源试用以及如何开始使用
演示
如需查看此事件的实际效果，请探索我们的演示，并查看 GitHub 上的源代码。
此演示展示了如何使用 clipboardchange 事件创建响应式粘贴界面，该界面会根据剪贴板内容自动更新。
尝试复制不同类型的内容（文本、图片、HTML），并观察粘贴按钮如何在没有任何轮询的情况下实时启用和停用！
反馈
我们非常希望了解 clipboardchange 事件在您的使用情形中发挥的作用。如需提供反馈，请在 W3C/clipboard-apis 代码库中创建问题。
有关您兴趣的公开信号将帮助我们和其他浏览器了解此功能对您的重要性，从而为标准化流程提供信息。
即使此事件可用作渐进式增强功能，我们也希望将其标准化为 Clipboard API 规范的一部分，并最终看到所有浏览器都采用它。目前，您可以改用轮询或其他剪贴板监控技术。