网页设计与制作教程——Web前端开发 第7版 课件 第10章 JavaScript事件处理.pptx

本节介绍事件的概念、类型、事件处理程序的绑定方式。第10章JavaScript事件处理10.1事件概述

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

10.1事件概述10.1.1事件的概念1.事件（Event）JavaScript事件是指在浏览器窗体或者HTML元素上发生的浏览器或者用户行为。页面上的每个元素都可以产生某些事件。行为是某个事件和由该事件触发的动作的组合。动作是预先编写的JavaScript函数，事件一般与元素绑定在JavaScript中，事件是预先定义好的、能够被对象识别的动作。事件定义了用户与网页交互时产生的各种操作。

10.1事件概述2.事件类型事件类型用来说明发生什么类型事件的字符串，即事件名。HTML事件可以是浏览器行为，也可以是用户行为。常用的事件类型包括窗口事件（load、unload等）、鼠标事件（click、dblclick、mousedown等）、键盘事件（keydown、keyup、keypress等）、文本事件（textInput等）等。

10.1事件概述3.事件目标（操作对象）事件目标就是发生事件的对象，也称事件目标对象。例如单击“确定”按钮，则该“确定”按钮就是事件目标。当谈论事件时，会同时指明类型和目标。

10.1事件概述4.事件处理函数事件处理函数（又称事件句柄、事件监听函数、事件监听器）是指用于响应某个特定事件被触发时而调用执行的函数。每一个事件均对应一个事件处理函数，在程序执行时，将相应的函数或语句指定给该事件处理函数，则在该事件发生时，浏览器便执行指定的函数或语句。一个对象可以响应一个或多个事件，因此可以使用一个和多个事件过程对用户或系统的事件做出响应。

10.1事件概述5.事件对象当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。事件对象，一般称为event对象。event对象中包含着所有事件相关的属性和方法，这些属性和方法均为只读的，见表1、表2。

10.1事件概述

10.1事件概述

10.1事件概述事件对象提供了两组属性来区别浏览器坐标的属性，一组是页面可视区坐标，另一组是屏幕坐标，见表3。

10.1事件概述其示意图如图10-1所示。

10.1事件概述6.事件周期（事件流）事件周期（也称事件流）是描述从页面中接收事件的顺序。事件周期分为3个阶段，如图所示。1）事件捕获（eventcapturing）阶段。2）目标触发（targettrigger）阶段。3）事件冒泡（eventbubbling）阶段。

10.1事件概述9.1.2事件的类型常见的事件类型分为HTML事件和DOM事件。1.HTML事件HTML具有使事件在浏览器中触发动作的能力，发生在浏览器窗口上的事件，称为HTML事件。（1）window（窗口）事件（2）mouse（鼠标）事件（3）keyboard（键盘）事件（4）form（表单）事件（5）media（媒体）事件

10.1事件概述2.DOM事件DOM事件分为DOM0级事件和DOM2级事件（没有DOM1）。（1）DOM0级事件DOM0级事件处理把JavaScript代码或一个函数赋值给一个事件处理属性，例如：inputid=myButtontype=buttonvalue=PressMeonclick=alert(Hello);varbtn1=document.getElementById(myButton).onclick=function(){alert(Hello);}后面如果再次设置函数，会覆盖之前的函数。（2）DOM2级事件DOM2级事件处理使用addEventListener()方法绑定事件程序。同DOM0级事件处理相比，它不会覆盖之前的事件。

10.1事件概述9.1.3事件处理程序的绑定方式JvaScript事件处理程序有3种绑定方式。1.HTML事件处理程序方式语法格式如下：标签名事件名=JavaScript脚本……/标签名或标签名事件名=事件处理函数名()……/标签名【例10-1】下面代码即为HTML事件处理程序，单击按钮后，会弹出消息框。本例文件10-1.html。

10.1事件概述!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleHTML事件处理程序/titlescripttype=text/javascript