JavaScript程序设计基础与实战- 课件 模块7　JavaScript事件处理及应用.pptx

JavaScriptJavaScript事件处理及应用JavaScript程序设计基础与实战时间:演讲人：

目录/DIRECTORY认识JavaScript的事件JavaScript的鼠标事件和键盘事件页面事件表单及表单控件事件编辑事件event对象DOM事件的使用比较JavaScript的事件方法实战演练

1.认识JavaScript的事件事件驱动是指由于某种原因（单击按钮或按键操作等）触发某项事先定义的事件，从而执行处理程序。JavaScript通过对HTML事件进行响应来获得与用户的交互，HTML事件可以是浏览器或用户做的某些事情。例如，当用户单击一个按钮或者在某段文字上移动鼠标指针时，就触发了一个单击事件或鼠标指针移动事件，通过对这些事件的响应，可以完成特定的功能。例如，单击按钮后弹出对话框、鼠标指针移动到文本上后文本颜色改变等。事件就是用户与Web页面交互时产生的操作，当用户进行单击按钮等操作时，即产生事件，需要浏览器对其进行处理。浏览器响应事件并进行处理的过程称为事件处理。Web页面触发事件的原因主要如下。①网页加载完成。②网页被关闭。③页面之间跳转。④网页的表单被提交。⑤网页中输入的数据需要验证。⑥网页表单控件中输入的内容被修改。⑦网页中按钮被单击。⑧网页内部对象的交互，包括选定、离开、改变页面对象等。

1.认识JavaScript的事件事件驱动是指由于某种原因（单击按钮或按键操作等）触发某项事先定义的事件，从而执行处理程序。JavaScript通过对HTML事件进行响应来获得与用户的交互，HTML事件可以是浏览器或用户做的某些事情。例如，当用户单击一个按钮或者在某段文字上移动鼠标指针时，就触发了一个单击事件或鼠标指针移动事件，通过对这些事件的响应，可以完成特定的功能。例如，单击按钮后弹出对话框、鼠标指针移动到文本上后文本颜色改变等。事件就是用户与Web页面交互时产生的操作，当用户进行单击按钮等操作时，即产生事件，需要浏览器对其进行处理。浏览器响应事件并进行处理的过程称为事件处理。Web页面触发事件的原因主要如下。①网页加载完成。②网页被关闭。③页面之间跳转。④网页的表单被提交。⑤网页中输入的数据需要验证。⑥网页表单控件中输入的内容被修改。⑦网页中按钮被单击。⑧网页内部对象的交互，包括选定、离开、改变页面对象等。

1.认识JavaScript的事件JavaScript允许在事件被监听到时执行代码，通过JavaScript代码，可向HTML元素添加事件处理程序。JavaScript代码可以置于双引号中，也可以置于单引号中。（1）置于双引号中。例如：elementevent=一些JavaScript代码（2）置于单引号中。例如：elementevent=一些JavaScript代码’以下代码中，onClick属性及其代码被添加到input元素，并且JavaScript代码改变了id=demo的元素的内容。pid=demo/pinputtype=buttonvalue=现在的时间是？onclick=document.getElementById(demo).innerHTML=Date()

1.认识JavaScript的事件JavaScript代码通常有很多行，事件属性调用函数更为常见。例如：inputtype=buttonvalue=现在的时间是？onclick=displayDate()functiondisplayDate(){document.getElementById(demo).innerHTML=Date();}以下代码中，使用this.value改变了其自身元素的内容。inputtype=buttonvalue=请单击onclick=this.value=单击成功

2.JavaScript的鼠标事件和键盘事件1．鼠标事件JavaScript中常用的鼠标事件有以下几种。（1）onClick事件：单击鼠标按键时触发。（2）onDblClick事件：双击鼠标按键时触发。（3）onMouseDown事件：按下鼠标按键时触发。（4）onMouseUp事件：释放鼠标按键时触发。（5）onMouseOver事件：鼠标指针移动到页面元素上方时触发。（6）onMouseOut事件：鼠标指针离开某对象范围时触发。（7）onMouseMove事件：鼠标指针在页面上移动时触发。2．键盘事件JavaScript中常用的键盘事件有以下几种。（1）onKeyPress事件：当键盘上的某个键被按下并释放时触发。（2）onKeyDown事件：当键盘上的某个键被按下时触发。（3）onKeyUp事件：当键盘上的某个键被释放时触发。