来源网络

# 一、基本使用

# 1.1 API 介绍

复制、剪切、粘贴事件

• copy 发生复制操作时触发;
• cut 发生剪切操作时触发;
• paste 发生粘贴操作时触发

每个事件都有一个 before 事件对应：beforecopy、beforecut、beforepaste。这几个 before 一般不怎么用，所以我们把注意力放在另外三个事件就可以了

触发条件

• 鼠标右键菜单的复制、粘贴、剪切
• 使用了相应的键盘组合键，比如:command+c、command+v

使用姿势

以 copy 为例

document.body.oncopy = e => {
  // 监听全局复制 做点什么
};
// 还有这种写法：
document.addEventListener('copy', e => {
  // 监听全局复制 做点什么
});

上面是在document.body上全局监听的，然而很多人不知道的是，我们还可以为某些 dom 单独添加剪切板事件

// html结构
<div id="test1"></div>
<div id="test2"></div>

<script>
    // 写法一样：
    let test1 = document.querySelector('#test1');
    test1.oncopy = e => {
        // 监听test1发生的复制事件 做点什么
        // test1发生的复制事件会触发回调，其他地方不会触发回调
    }
</script>

其他事件也是一样的

# 1.2 clipboardData

clipboardData 对象:用于访问以及修改剪贴板中的数据

不同浏览器，所属的对象不同：在 IE 中这个对象是window对象的属性，在Chrome、Safari和Firefox中，这个对象是相应的event对象的属性。所以我们在使用的时候，需要做一下如下兼容

document.body.oncopy = e => {
  let clipboardData = e.clipboardData || window.clipboardData;
  // 获取clipboardData对象 

Preview