网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-keyboard事件.pptx

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

目录JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题10

10.4keyboard事件有关键盘事件见表。

keyboard事件的语法格式如下：HTML中：elementon事件名=myScriptJavaScript中：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事件

!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title键盘事件（上、下、左、右）/title/headbodydivid=box/divscripttype=text/javascriptvarbox=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/html10.4keyboard事件

10.4.2keypress事件keypress事件会在字符键被按下并释放键时发生。keypress事件主要用来捕获数字（包括Shift+数字的符号）、字母（包括大小写）、小键盘等，除了F1~F12、Shift、Alt、Ctrl、Insert、Home、PgUp、D