第5章 事件处理

第5章事件处理教学目标通过键盘或鼠标在网页对象上发生的动作叫做“事件”，事件可以处理。通过本章的学习，使学生掌握与事件有关的概念等基础知识、了解事件有哪些分类、并掌握常用的JavaScript事件。教学要求知识要点能力要求关联知识事件的概念了解事件的概念事件处理程序事件的分类熟悉事件的分类事件的适用范围鼠标事件的使用方法掌握常用的鼠标事件事件和动作的对应关系键盘事件的使用方法掌握常用的键盘事件键的代码页面事件的使用方法掌握常用的页面事件事件与发生时间的关系学习重点事件和事件处理程序的概念鼠标事件、键盘事件、页面事件等的基本使用方法本章目录5.1【案例17】简单的事件处理5.2【案例18】鼠标事件5.3【案例19】键盘事件5.4【案例20】页面事件5.5综合实训5.6习题5.1【案例17】案例效果要求用户按照提示输入，如果文本框中输入的不是“t”，则弹出对话框提示错误。图5.1简单的Submit事件效果图主要代码如下：scriptlanguage=JavaScriptfunctiononsubmitfun(){varval=document.myform.text.value;if(val==t)return(true);else{alert(输入错误!);return(false);}}/script代码设计相关知识事件的定义事件(Event)是用户与网页交互操作时产生的操作，一般将用户的鼠标和键盘动作称为事件。从广义上讲，JavaScript脚本中的事件是指从用户载入目标页面一直到该页面被关闭期间产生的浏览器的动作，以及该页面用户操作的响应。相关知识事件处理程序的定义事件处理程序是与特定的文本和特定的事件联系在一起的JavaScript脚本代码，也就是说，当该文本发生改变或者事件被触发时，就会通知浏览器发生了操作，需要进行处理，然后浏览器执行该代码并进行相应的处理操作，这个过程被称为事件处理。相关知识JavaScript的常用事件鼠标事件，如Click。键盘事件，如KeyDown。页面事件，如Abort。编辑事件，如BeforeCopy。表单事件，如Blur。滚动字幕事件，如Bounce。5.2【案例18】案例效果当鼠标经过链接文字时，状态栏会显示文字“欢迎来这里查询！”；当鼠标从链接文字移开时，弹出对话框。图5.2MouseOver事件和MouseOut事件效果图代码设计scriptlanguage=JavaScriptfunctionmousefun(){if(!confirm(你确定不需要查询？))window.location=}/script相关知识鼠标事件的定义在图形交互界面环境下，鼠标操作是最常用的操作，主要包括单击和移动两大类。相关知识鼠标的常用事件Click事件(单击鼠标事件)Click事件是平时最常使用的一个事件，对应的事件处理程序是onClick，可用于按钮、复选框、超链接等多种界面元素。相关知识鼠标的常用事件Click事件(单击鼠标事件)图5.3Click事件之单击按钮效果图inputtype=buttonvalue=单击事件测试按钮onClick=alert('单击事件');相关知识鼠标的常用事件MouseDown事件和MouseUp事件(按下鼠标事件和释放鼠标事件)当鼠标的某一个键被按下时，就会发生MouseDown事件，这时JavaScript会自动调用相应的事件处理程序onMouseDown。与MouseDown事件相反，MouseUp事件发生在被按下的某一个键被释放时，这时JavaScript会自动调用相应的事件处理程序onMouseUp。相关知识鼠标的常用事件MouseDown事件和MouseUp事件(按下鼠标事件和释放鼠标事件)图5.5MouseDown事件效果图inputtype=buttonvalue=MouseDown事件测试按钮onMouseDown=alert('你已按下鼠标！');相关知识鼠标的常用事件MouseMove事件(鼠标移动事件)这个事件不属于任何对象，如果某一对象需要处理该事件，就要对其进行捕获。这个事件发生在鼠标移动时，在事件发生后，JavaScript会自动调用执行相应的事件处理程序onMouseMove。相关知识鼠标的常用事件MouseMove事件(鼠标移动事件)图5.7MouseMove事件效果图imgsrc=MouseMove.jpgwidth=140height=140onMouseMove=alert('鼠标刚才动过!')5.3【案例19】案例效果在第一、二、三个文本框中分别按下任一个键，分别发生KeyDown事件、KeyUp事件、KeyPress事件并产生相应提示。图5.8键盘的3个事件效果图代码设计inputtype=textvalue=请在这里按下某个按键size=40onKeyDown=alert('发生了KeyDown事件');brbrinputtype=textvalue=请在这里按下某个按键然后松开size=40onKeyUp=alert('发生了KeyUp事件');brbrinputtype=textvalue=请在这里输入一个字符size=40onKeyPress=alert('发生了KeyPress事件');相关知识键盘事件的定义键盘操作主要是完成输入或代替鼠标实现某些功能。相关知识键盘的常用事件KeyDown事件KeyUp事件KeyPress事件5.4【案例20】案例效果当页面装载完成后会弹出一个对话框提示“我是一个对话框！”。图5.9Load事件效果图代码设计bodyonLoad=alert('我是一个对话框!')相关知识页面事件的定义浏览器是JavaScript和用户交互的媒介，当用户进行某个操作从而触发某事件时，浏览器会通知JavaScript做出响应，而浏览器本身也可以引发事件发生。相关知识常用页面事件Load事件和unLoad事件(加载页面事件和卸载页面事件)在浏览器装载完一个窗口或一组帧之后会发生Load事件，和其对应的事件处理程序是onLoad。unLoad事件和Load事件发生的时机正好相反，当用户退出当前页面，而导致卸载文档或框架集时发生该事件。相关知识常用页面事件unLoad事件(卸载页面事件)图5.10unLoad事件效果图bodyonunLoad=alert('再见！')相关知识常用页面事件Resize事件(改变页面大小事件)Resize事件是在浏览器窗口的大小被改变时触发的，用来判断何时动态地改变某些元素。相关知识常用页面事件Resize事件(改变页面大小事件)图5.11Resize事件效果图bodyonResize=alert('窗口大小发生了变化!!')5.5综合实训当在页面上按下Ctrl键、或者从某处开始选中文字、或者右击鼠标这三个动作发生时，将弹出不同的警告窗口。图5.13综合实训案例运行效果图代码设计scriptlanguage=javascriptfunctionclick(){alert('禁止你的左键复制！')}functionclick1(){if(event.button==2){alert('禁止右键点击~！')}}functionctrlkeydown(){if(event.ctrlkey){alert('不当的拷贝将损害您的系统！')}}document.onkeydown=ctrlkeydown;document.onselectstart=click;document.onmousedown=click1;/script