第七章-事件及事件处理_第1页
第七章-事件及事件处理_第2页
第七章-事件及事件处理_第3页
第七章-事件及事件处理_第4页
第七章-事件及事件处理_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

JavaScript前端开发（第七章

事件及事件处理）目录1、事件的概念3、处理鼠标和键盘事件4、页面事件2、事件的对象1事件的概念1.1认识事件和事件处理1.2事件绑定1.事件的概念事件是指在页面上与用户进行交互时发生的操作，主要包括用户动作和用户状态的变化。例如，当用户单击一个超链接或按钮时就会触发单击事件，浏览器会根据用户的动作进行相关的事件处理操作。当浏览器载入一个页面时，会触发一个载入（load）事件，当调整窗口大小的时候，会触发一个改变窗口大小（resize）的事件，这就是相关的用户状态发生变化引发的事件。1．事件的命名规则JavaScript中，事件的命名都是描述性的，比较容易理解，如单击（click）、双击（dblclick）、提交（submit）、按下鼠标（mousedown）等。如表7-1所示，都是常用的事件名称。1.1.认识事件和事件处理1.事件的概念表7-11.事件的概念2．事件处理在JavaScript中，事件处理可以分为三个步骤，即①触发事件，②启动事件处理程序③事件处理程序对相关事件进行处理，返回处理结果。在事件处理中，必须通过指定的事件对象来启动事件处理程序，才能完成对相应事件的操作。事件处理程序可以使用任何JavaScript代码来完成，但是一般使用自定义函数来对事件进行处理。在事件处理中，程序代码的执行顺序并不是按照代码的顺序从上而下地执行的，而是事件触发的需要来执行的。当触发一个事件，该事件的处理程序就会被启动执行，不管这段程序代码在程序中的什么位置。在JavaScript中，由于事件是用户交互产生的，所以其触发的顺序是无法预测的，其执行程序的路径都是不同的。1.1.认识事件和处理事件1.事件的概念3．事件分类JavaScript事件大致可以分为以下4类。（1）页面事件页面事件是指因页面状态的变化而产生的事件，主要包括文档载入（load）和文档卸载（unload）事件、改变窗口大小（resize）事件、文档装载错误（error）事件等。（2）鼠标事件鼠标事件是指用户进行单击或移动鼠标操作而产生的事件，主要包括单击（click）事件、双击（dblclick）事件、鼠标按下（mousedown）事件、鼠标弹起（mouseup）事件、鼠标经过（mouseover）事件、鼠标移动（mousemove）事件、鼠标移开（mouseout）事件。1.1.认识事件和处理事件1.事件的概念（3）键盘事件键盘事件是指用户在键盘敲击、输入时触发的事件，包括按键（keypress）事件、按下键（keydown）事件、弹起键（keyup）事件等。（4）表单事件表单事件是指与表单相关的事件，是JavaScript中最常用的事件，本书将在第8章进行详细介绍，包括表单提交（submit）事件、表单重置（reset）事件、表单元素内容改变（change）事件、文本选中（select）事件、获得焦点（focus）事件、失去焦点（blur）事件等。1.1.认识事件和处理事件1.事件的概念事件绑定是指将HTML文档的元素事件属性与事件处理程序（主要是指函数）相关联，使得当事件发生时就会触发该事件关联函数的执行。在JavaScript中，事件的绑定有两种方式，一种是静态绑定，另一种是动态绑定。1．事件的属性事件绑定是通过事件的属性进行绑定的，事件的属性是指在事件名称前加上前缀“on”，在JavaScript中，事件属性名称就是“on”+“事件名称”。如click是单击事件名，onclick就是对应的事件属性名，也可以将事件属性名简称为事件名。按照事件属性名的定义，常用的事件属性如表7-2所示。1.2.事件的绑定1.事件的概念表7-21.事件的概念2．静态绑定静态绑定是指将事件处理程序（函数）直接作为HTML元素的事件属性值。语法如下所示。事件属性名=“事件处理程序”例如，为button标签指定一个单击onclick事件。当用户单击这个按钮时，会触发onclick单击事件，执行事件处理程序alert()语句，在页面上弹出一个对话框“HelloJavaScript”。1.2.事件的绑定<buttonname="buttonName"onclick="alert('HelloJavaScript！')"/> 欢迎</button>1.事件的概念1.2.事件的绑定3．动态绑定在JavaScript中，事件也是对象的组成部分，也可以通过点“.”运算符来调用事件。动态绑定就是指将事件处理函数赋值给HTML元素对象的事件属性。语法如下所示。元素对象.事件属性=函数对象使用元素对象的事件属性来对事件处理函数对象的引用，不能将函数对象用引号括起来，因为它不是字符串。2事件的对象2.2事件流2.1Event对象

2.事件的对象2.1.Event对象

（1）什么是事件对象？就是当你触发了一个事件以后，对该事件的一些描述信息例如：你触发一个点击事件的时候，你点在哪个位置了，坐标是多少。你触发一个键盘事件的时候，你按的是哪个按钮。每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象。浏览器给了我们一个黑盒子，叫做window.event，就是对事件信息的所有描述。这个玩意很好用，但是一般来说，好用的东西就会有兼容性问题，在IE低版本里面这个东西好用，但是在高版本IE和Chrome里面不好使了。我们就得用另一种方式来获取事件对象，在每一个事件处理函数的行参位置，默认第一个就是事件对象。2.事件的对象2.2.事件流

在JavaScript中，事件流指的是DOM事件流。当一个事件发生时，不仅产生事件的元素响应，其他元素也可以响应。由于DOM模型是一个树型结构，其中的HTML元素上产生一个事件时，该事件会在DOM树中元素节点和根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个过程就是DOM的事件流。按照传播方向的不同，DOM事件流有两种方式：冒泡事件和捕获事件。1．冒泡事件JavaScript中，默认使用冒泡事件。当事件在某一元素上触发时，事件将沿着各个节点的父节点自下而上穿过各个DOM节点，就好冒泡一样，所以这种方式称冒泡事件方式。在冒泡的过程中，在任何时候都可以终止事件的冒泡。如果不终止冒泡，事流会沿着DOM节点一直向上直至DOM的根节点。2.事件的对象2.2.事件流

2．捕获事件与冒泡事件相反，在捕获事件中，事件的传播将从DOM树的根节点开始，而不是从触发事件的目标元素开始。事件是从目标元素的所有祖先元素依次向下传递。在这个过程中事件会从DOM树的根元素到事件目标元素之间各个继承之间的元素所捕获。捕获事件流的传播过程如图7-4所示。图7-4捕获事件示意图2.事件的对象2.2.事件流

3．事件传导的3个阶段在W3C定义的事件模型中，事件传导可以分为下面3个阶段。（1）事件捕捉阶段：事件将沿着DOM树向下传递，经过目标节点的每一个祖先节点，直到目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到HTML元素、body元素以及包含该链接的p元素。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该超链接就是目标节点。（2）目标阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器。（3）冒泡阶段：事件将沿着DOM树向上转送，再逐次访问目标元素的祖先节点直到document节点。该过程中的每一步，浏览器都将检测那些不是捕捉事件监听器的事件监听器并执行。3处理鼠标和键盘事件3.1鼠标事件3.2处理鼠标事件3.3键盘事件3.处理鼠标和键盘鼠标事件3.1.鼠标事件鼠标事件是指用户操作鼠标而触发的事件，主要分为两类。1．鼠标点击事件包括onclick（单击）、ondblclick（双击）、onmousedown（鼠标按下）和onmouseup（鼠标弹起）事件。鼠标单击事件时有一个单击顺序，例如在单击对象时，会触发onclick事件。在onclick事件触发前，会先发生onmousedown事件，然后发生onmouseup事件。与此类似，在双击事件ondblclick事件触发前，会依次触发onmousedown、onmouseup、onclick、onmouseup事件。2．鼠标移动事件包括onmouseover（鼠标经过）、onmousemove（鼠标移动）、onmouseout（鼠标移开）事件。3.处理鼠标和键盘鼠标事件3.3.键盘事件JavaScript中，键盘事件包括onkeypress、onkeydown、onkeyup三个事件，它们的区别如下所示。（1）onkeypress：键盘上某个键被按下时触发的事件，一般用于单键操作。（2）onkeydown：键盘上某个键被按下时触发的事件，一般用于组合键操作。（3）onkeyup：键盘上某个键被按下后松开触发的事件，一般用于组合键操作。4页面事件4.1处理页面事件4.2页面加载与卸载事件4.2页面大小事件4.页面事件4.1.处理页面事件页面事件是在页面加载或者改变浏览器大小、位置，以及对页面的滚动条进行操作时触发的事件。页面相关事件：1.onload页面或图像加载完成时触发2.onunload关闭页面或退出时触发3.onerror加载文档或图像发生错误时触发4.onresize改变窗口大小时触发4.页面事件4.2.页面加载与卸载事件加载事件（onload）是在网页加载完成后触发相应的事件处理程序，它可以在页面加载完成后，对页面中的表格样式、字体、背景颜色进行设置。卸载事件（unload）是在卸载网页时触发相应的事件处理程序，卸载网页指的是关闭当前页，或从当前页跳转到其他网页。该事件通常被用于在关闭当前页面或跳转其他网页时，弹出询问对话框。1．<body>元素绑定onload事件<body>元素绑定onload事件后，当浏览器中当前HTML文档装载完成就会触发onload事件，页面中的脚本就可以访问页面中的任意元素。根据onload元素的这种特性，可以将需要在页面载入后立即执行的脚本放在onload事件处理函数中，脚本的执行不受onload事件处理函

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

温馨提示

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

最新文档

评论

0/150

提交评论