用户在浏览器界面进行copy行为的时候，会触发copy 事件。copy行为如：使用CTRL/Cmd+C快捷键或者在操作里点击"Copy"命令。copy事件会调用document.execCommand('copy')
基本信息
- Specification
- Clipboard
- Interface
ClipboardEvent- Bubbles
- Yes
- Cancelable
- Yes
- Target
Element: 获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素)，或者是<body>- Default Action
- See below.
调用setData(format, data)可以修改ClipboardEvent.clipboardData事件的默认行为：
document.addEventListener('copy', function(e){
e.clipboardData.setData('text/plain', 'Hello, world!');
e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
});
不能使用clipboardData.getData()在事件处理函数中获取剪切板数据。
事件的行为与事件的来源和事件处理函数相关事件行为可能会因为事件触发的对象和事件处理函数而有不同的表现：
- synthetic copy事件没有默认行为，除非：
- 如果默认事件没有取消，就复制到选区（如果有选中内容）到剪切板；
- 如果取消了默认事件，但是调研了
setData()方法：就复制clipboardData的内容到clipboard； - 如果取下了默认行为，而且没有调用
setData()方法，就没有任何行为。
属性
| Property | Type | Description |
|---|---|---|
target 只读 |
EventTarget |
The event target (the topmost target in the DOM tree). |
type 只读 |
DOMString |
The type of event. |
bubbles 只读 |
Boolean |
Whether the event normally bubbles or not |
cancelable 只读 |
Boolean |
Whether the event is cancellable or not? |
兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | ? | ? | ? |
clipboardData |
(Yes) | (Yes) | 22 (22) | 未实现 | ? | ? |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | (Yes) | ? | ? | ? |
clipboardData |
? | (Yes) | 22.0 (22) | ? | ? | ? |