网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-keyboard事件_第1页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-keyboard事件_第2页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-keyboard事件_第3页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-keyboard事件_第4页
网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-keyboard事件_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

keyboard（键盘）事件就是有关操作键盘所触发的事件，主要包括按下任意键、按下字符键、键盘键抬起时触发的事件。

JavaScript事件处理keyboard事件目录

JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题1010.4keyboard事件有关键盘事件见表。keyboard事件的语法格式如下：HTML中：<elementon事件名="myScript">JavaScript中：object.on事件名=function(){myScript};JavaScript中使用addEventListener()方法：object.addEventListener(“事件名",myScript,false);10.4keyboard事件10.4.1keydown事件【例10-16】本例使用方向键控制页面元素的移动，左箭头键、上箭头键、右箭头键和下箭头键的码值分别是37、38、39和40。本例文件10-16.html在浏览器中显示如图10-13所示。10.4keyboard事件<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>键盘事件（上、下、左、右）</title></head><body><divid="box"></div><scripttype="text/javascript">varbox=document.getElementById("box");//获取页面元素的引用指针

box.style.position="absolute";//色块绝对定位

box.style.width="50px";//色块宽度

box.style.height="50px";//色块高度

box.style.backgroundColor="red";//色块背景

document.onkeydown=keyDown;//在Document对象中注册keyDown事件处理函数

functionkeyDown(event){//方向键控制元素移动函数

varevent=event||window.event;//标准化事件对象

switch(event.keyCode){//获取当前按下键盘键的编码

case37://按下左箭头键，向左移动5个像素

box.style.left=box.offsetLeft-5+"px";break;case39://按下右箭头键，向右移动5个像素

box.style.left=box.offsetLeft+5+"px";break;case38://按下上箭头键，向上移动5个像素

box.style.top=box.offsetTop-5+"px";break;case40://按下下箭头键，向下移动5个像素

box.style.top=box.offsetTop+5+"px";break;}returnfalse}</script></body></html>10.4keyboard事件10.4.2keypress事件keypress事件会在字符键被按下并释放键时发生。keypress事件主要用来捕获数字（包括Shift+数字的符号）、字母（包括大小写）、小键盘等，除了F1~F12、Shift、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、Windows开始键、菜单键和方向键外的ANSI字符。这个事件发生后自动调用onkeypress句柄。该句柄适用于浏览器对象Document、图像、超链接以及文本区域。10.4keyboard事件10.4.3keyup事件【例10-17】在文本框中输入小写字母，当松开键后触发keyup事件，执行事件处理函数转换为大写。本例文件10-17.html在浏览器中显示如图10-14所示。10.4keyboard事件<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>keyup事件</title><scripttype="text/javascript">functionmyFunction(){varx=document.getElementById("fname");x.value=x.value.toUpperCase();}</script></head><body><p>在文本框中输入小写字母，当松开键后将转换为大写</p>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论