深入理解DOM事件类型系列——剪贴板事件

定义

　　剪贴板操作包括剪切(cut)、复制(copy)和粘贴(paste)这三个操作，快捷键分别是ctrl+x、ctrl+c、ctrl+v。当然也可以使用鼠标右键菜单进行操作

对象事件

　　关于这3个操作共对应下列6个剪贴板事件

　　　　copy：在发生复制操作时触发

　　　　cut：在发生剪切操作时触发

　　　　paste：在发生粘贴操作时触发

　　　　beforecopy：在发生复制操作前触发

　　　　beforecut：在发生剪切操作前触发

　　　　beforepaste：在发生粘贴操作前触发

　　IE浏览器只有在文本中选定字符时，copy和cut事件才会发生。且在非文本框中(如div元素)只能发生copy事件

　　firfox浏览器只有焦点在文本框中才会发生paste事件

<input type="text" id="test">
<script>
    var el = document.getElementById('test');
    el.oncut = el.oncopy = el.onpaste = function (e) {
      e = e || event
      el.value = e.type;
      console.log(e) // cut || paste || copy
    }
    el.onbeforepaste= el.onbeforecopy = el.onbeforecut = function(e){
      e = e || event;
      el.value = e.type;
      return false;
    }

</script>

对象方法

　　剪贴板中的数据存储在clipboardData对象中。对于IE浏览器来说，这个对象是window对象的属性；对于其他浏览器来说，这个对象是事件对象的属性

    e = e || event;
    var clipboardData = e.clipboardData || window.clipboardData;

　　这个对象有三个方法：getData()、setData()和clearData ()

　　getData()

　　　　getData()方法用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式。在IE中，有两种数据格式："text" 和 "URL"。在其他浏览器中，这个参数是一种MIME类型；不过，可以用"text"代表

[注意]在IE浏览器中，cut和copy事件中的getData()方法始终返回null；而其他浏览器始终返回空字符串''。但如果和setDada()方法配合，就可以正常使用

<input type="text" id="test">
<script>
 var el = document.getElementById('test');
    el.oncut = el.oncopy = el.onpaste = function (e) {
      e = e || event
      var clipboardData = e.clipboardData || window.clipboardData;
      console.log(e.type, clipboardData.getData('text'));
    }
  // copy
  // cut
  // paste 内容
</script>  

　　setData()

　　　　setData()方法的第一个参数也是数据类型，第二个参数是要放在剪贴板中的文本。对于第一个参数的规则与getData()相同

　　　　在IE浏览器中，该方法在成功将文本放到剪贴板中后，返回true，否则返回false；而其他浏览器中，该方法无返回值

[注意]在paste事件中，只有IE浏览器可以正常使用setData()方法，chrome浏览器会静默失败，而firefox浏览器会报错

　　clearData()

　　　　clearData()方法用于从剪贴板中删除数据，它接受一个参数，即要取得的数据的格式。在IE中，有两种数据格式："text"和"URL"。在其他浏览器中，这个参数是一种MIME类型；不过，可以用"text"表示