编辑事件是在浏览器中的内容被修改或移动时所执行的相关事件哎，主要是对浏览器中被选择的内容进行复制、剪切、粘贴时的触发事件，以及在用鼠标拖动对象时所触发的一系列事件的集合。
文本编辑事件
文本编辑事件是对浏览器中的内容进行复制、剪切、粘贴和选择时所触发的事件。
1.复制事件
复制事件是在浏览器中复制被选中的部分或全部内容时触发事件处理程序，复制事件有onbeforecopy和oncopy, onbeforecopy 事件是将网页内容复制到剪贴板时触发事件处理程序，oncopy 事件是在网页中复制内容时触发事件处理程序。
例如：不允许复制网页中的内容
代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body oncopy="return no()">
<marquee behavior="alternate" >
中国物联网校企联盟将物联网定义为当下几乎所有技术与计算机、互联网技术的结合，实现物体与物体之间：环境以及状态信息实时的共享以及智能化的收集、传递、处理、执行。广义上说，当下涉及到信息技术的应用，都可以纳入物联网的范畴。
</marquee>
</body>
<script type="text/javascript">
function no(){
alert("该页面不允许复制");
return false;
}
</script>
</html>
注意
如果在onbeforecopy和oncopy事件中调用的是自定义函数名，那么，必须在函数名的前面加retum语句;否则，不论在函数中返回的是true,还是false,当前事件所返回的值一律是true 值，也就是允许复制。
其实，要是想屏蔽网页中的复制功能，可以直接在<body>标记的onbeforecopy或oncopy事件中用JavaScript语句来实现。代码如下:
<body oncopy="return false">
</body>
2.剪切事件
剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序，剪切事件有onbeforecut和oncut两个事件，onbeforecut事件是当页面中的一.部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序，oncut事件是当页面中被选择的内容被剪切时触发事件处理程序。
例子：屏蔽在文本框中进行剪切的操作
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body oncut="return nocut()">
<marquee >
中国物联网校企联盟将物联网定义为当下几乎所有技术与计算机、互联网技术的结合，实现物体与物体之间：环境以及状态信息实时的共享以及智能化的收集、传递、处理、执行。广义上说，当下涉及到信息技术的应用，都可以纳入物联网的范畴。
</marquee>
</body>
<script type="text/javascript">
function nocut(){
alert("该页面不允许剪切");
return false;
}
</script>
</html>
3.粘贴事件
粘贴事件有onbeforepaste和onpaste。
onbeforepaste事件是将内容从浏览者的系统剪贴板中粘贴到页面上时所触发的事件处理程序。可以利用该事件避免浏览者在填写信息时，对验证信息进行粘贴，如密码文本框和确定密码文本框中的信息。
例子：在向文本框粘贴文本时，利用onbeforepaste事件来清空剪贴板，使其无法向文本框中粘贴数据。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<form name="form1" method="post">
<input type="text" name="field" onbeforepaste="return clearup()" />
</form>
</body>
<script type="text/javascript">
function clearup(){
window.clipboardData.setData("text",""); //清空剪切板
}
</script>
</html>
4.对象拖动事件
在JavaScript中有两种方法可以实现拖放功能，即系统拖放和模拟拖放。微软为IE提供的拖放事件有两类，类是拖放对象事件， 另类是放置目标事件。下面对这两类所包含的事件进行说明。
1.拖放对象事件
拖放对象事件包含ondrag、ondragend 和ondragstart事件。
ondrag事件是当某个对象被拖动时触发事件处理程序。
ondragend 事件是当鼠标拖动结束时触发事件处理程序，也就是鼠标的按钮被释放时触发该事件。
ondragstart 事件是当某对象将被拖动时触发事件处理程序，也就是当鼠标按下，开始移动鼠标时触发该事件。
例如，在图片被拖动时，在窗口的标题栏中显示图片拖动的状态。也就是在将要拖动图片时，在标题栏中显示dragstart;在拖动图片时，在标题栏中显示drag:在拖动结束时，在标题栏中显示dragend。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="form1" method="post">
<input name="img" type="image" src="img/banner01.png" ondrag="drag(event)" ondragend="drag(event)" ondragstart="drag(event)"/>
</form>
<script type="text/javascript">
function drag(event){
document.title=Event.type; //在窗口的标题栏中写入相应的事件类型名
}
</script>
</body>
</html>
注意
在对对象进行拖动时，- 一般都要使用ondragend事件，用来结束对象的拖动操作。
2.放置目标事件
放置目标事件包含ondragover、ondragenter、 ondragleave 和ondrop事件。
ondragover事件是当某个被拖动的对象在另一对象容器范围内拖动时触发事件处理程序。
ondragenter事件是当对象被鼠标拖动进入其容器范围内时触发事件处理程序。
ondragleave事件是当鼠标拖动的对象离开其容器范围内时触发事件处理程序，也就是当dragover停止触发，对象被拖出放置目标时，触发该事件。
ondrop事件是在一个拖动过程中，释放鼠标时触发事件处理程序，也就是被拖动的对象在其他容器上松开鼠标时，触发drop事件而不是dragleave事件。
例子：放置目标事件的简单实例
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="330px" height="136px" border="1px">
<tr>
<td id="td1" align="center" width="165" height="136px">
<input name="img" type="image" src="img/banner01.png" width="150px" height="120px" border="0"/>
</td>
<td id="td2" align="center" width="165" height="136px"
ondragenter=""
ondragover=""
ondragleave=""
ondrop=""></td>
</tr>
</table>
<script type="text/javascript">
function dragobject(event){
switch(event.type){
case "dragover":
{
document.title="在目标容器范围内进行拖动";
break;
}
case "dragenter":
{
document.title="进入目标容器范围";
break;
}
case "dragleave":
{
document.title="对象离开目标容器";
break;
}
case "drop":
{
document.title="在目标容器中放下该对象";
break;
}
}
}
</script>
</body>
</html>
