HTML5+CSS3+JavaScript网站开发实用技术第7章.pptVIP

7.7 编辑事件 编辑事件是在浏览器的内容被修改或移动时所执行的事件。它主要是指浏览器中被选择的内容进行复制、剪切和粘贴时的触发事件，以及在用鼠标拖动对象时所触发的一系列事件的集合。 7.7.1 文本编辑事件 复制事件(oncopy):当用户复制选中区时触发 剪切事件(oncut)：当用户剪切选中区时触发 粘贴事件(onpast)：当用户粘贴数据时在目标对象上触发 选择事件(onselect，onselectstart)：选择事件是用户在body、input或textarea表单区域中选择文本时触发。 7.7 编辑事件 方法 说明 getData(sDataFormat) 从系统剪贴板获取指定格式的数据。其中，参数sDataFormat指定数据格式，取值为“Text”或“URL” setData(sDataFormat,sData) 将指定格式的数据保存到系统剪贴板。其中，参数sDataFormat指定数据格式。而参数sData是字符串型数据 clearData() 清楚系统剪切板中的数据 ClipboardData对象常用方法 demo0711.html 7.7 编辑事件 7.7.2 拖放事件 根据事件触发的对象，拖放事件分为拖放对象事件和放置目标事件。 1.拖放对象事件 ondrag事件是当某个对象被拖动时触发事件处理程序。 ondragend事件是当鼠标拖动结束时触发事件处理程序，也就是鼠标的按钮被释放时触发该事件。 ondragstart事件是当某对象将被拖动时触发事件处理程序，也就是当鼠标按下，开始移动鼠标时触发该事件。这三个事件的触发顺序是ondragstart，ondrag，ondragend。 7.7 编辑事件 2.放置目标事件 ondragover事件是当某个被拖动的对象在另一对象容器范围内拖动时触发事件处理程序。 ondragenter事件是当对象被鼠标拖动进入其容器范围内时触发事件处理程序。 ondragleave事件是当鼠标拖动的对象离开其容器范围内时触发事件处理程序，也就是当dragover停止触发，对象被拖出放置目标时，触发该事件。 ondrop事件是在一个拖动过程中，释放鼠标时触发事件处理程序，也就是被拖动的对象在其他容器上松开鼠标时，触发ondrop事件而不是dragleave事件。 7.7 编辑事件 例:用户名和密码框都禁止用户通过拖拽的方式输入 form method=post action= name=loginForm p可选文本：张三，李四，123456，888888/p 用户姓名:input type=text name=user ondragenter=return false/ br / 用户密码:input type=password name=pwd ondragenter=return false input type=button value=登录 / /form 7.8 应用案例 7.8.1 商品评级网页案例 实例：demo0712.html 模拟实现购物网站商品评级功能。 用HTML和CSS制作图页面。投票区域用#vote样式定义宽度400px的灰色区域；再添加文字说明和用两种不同图片表示的星形投票标记；之后是1行2列的表格，置入背景图片和相应的文字说明；最后是“提交评价”按钮，本示例中未设置操作。 JavaScript中的程序代码功能为：设定鼠标经过投票的星形图标时为准备投票状态；单击星形图标为投票状态，执行commitScore()方法；鼠标离开时，执行resetScore()方法，一次投票完成，改变投票标记。不能再投票。 7.8 应用案例 7.8.2 网络相册案例 当鼠标停留在某张图片的预览图上时，屏幕下方区域会自动显示对当前图片的大图，当点击“上一张”“下一张”按钮时，可切换显示图片。 demo0713.html 7.8 应用案例 案例设计思路如下。 （1）用HTML和CSS制作图页面部分。 导航区域。由两条装饰线和一系列缩小的图片组成。装饰线用类标记.bdr设计；装饰图片由类标记.img来定义，这个标记中，只规定了图片的高度，宽度将按比例显示 图片显示区域，格式由ID标记#show定义。初始状态下，通过display:none;设置该区域隐藏。 （2）JavaScript中的程序代码功能描述如下。 init()方法找到所有的导航区域的图片，并用addEvent Listener(imgArr[i], mouseover, handleEvent)方法添加监听。设置当鼠标经过图片时，用handleEvent()方法处理。通过setTimeout()方法，实时监听go()方法，如果有动作发生，则执行go()方法。 小结 主要介