第13讲事件

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

13.2.3 DOM事件流
• HTML DOM支持2种事件流：冒泡型事件流和捕获型事件流。捕获型事件流首先发生，2种事件流都会触及DOM中的所有对象。DOM事件流在Firefox中得到了广泛支持，即事件发生从 document对象开始，也在document对象结束。实际上在 Firefox中，会将事件流顺序一直延续至window对象。 • DOM事件流中事件顺序如下所示： – Document对象。 – <body>。 – <input type=button>。 – <input type=button>。 – <body>。 – Document对象。
13.3.2 DOM事件处理监听函数
• 对于Firefox这样的开源浏览器，只有遵循标准才能保证开源的实施。Firefox严格遵循DOM标准，在Firefox中使用JavaScript 动态添加或移除事件处理监听函数必须使用addEventListener() 、removeEventListener()函数。 • addEventListener()、removeEventListener()函数都有3个参数：事件名称、需要分配或移除的事件监听函数、是否处于 DOM事件流的捕获阶段。其中前2个参数和IE相同，第3个参数若为true说明事件监听函数处于DOM事件流的捕获阶段，若为falser说明事监听函数是否处于DOM事件流的冒泡阶段。 • 使用addEventListener()、removeEventListener()函数与IE中添加事件处理函数的方式非常相像，可以使用以下函数调用 addEventListener()、removeEventListener()函数：
13.4.3 IE与DOM中event对象的区别
• IE与Firefox虽然在实现event对象时保持了一定的共性，但是由于IE与DOM事件标准之间的不协调，这二者之间还是保持了相当的独立性。本节将展示这些独立性，为读者日后开发跨浏览器事件开发打下良好基础。 (2)IE与DOM中event对象的区别包括以下方面： – 获取事件源 – 获取按键字符代码 – 阻止事件的默认行为 – 停止事件的多次响应
事件模型简介
DOM 0 事件模型
主要特点是把一个函数分配给元素的一个属性，比如 onClick=“fun();” 不支持多个事件处理函数
DOM 2事件模型
element.addEventListener(eventType,listener,userCapture) eventType：事件名，相对于第一个模型是无on，如click事件， mouseover事件等不被IE支持执行的顺序不能保证与加入处理函数的顺序一致
13.5.1 鼠标事件
1.鼠标事件基础：鼠标事件是最常见的事件类型，包含以下一些事件。 • click：用户单击鼠标左键会触发这个事件，当用户焦点处于按钮，单击回车键也会触发onclick事件。 • dbclick：当用户双击鼠标左键时会触发该事件。 • mousedown：用户单击任意鼠标按钮都会触发 onmousedown事件。 • mouseout：当鼠标指针在某个元素范围之内，但鼠标指针将移出元素的边界时发生。 • mouseover：鼠标移出某个元素，到另一个元素时发生。 • mouseup：用户鼠标任意键弹起时会触发该事件。 • mousemove：当鼠标在某元素范围内移动时会触发该事件。
13.5.2 键盘事件
键盘事件也是在Web开发中常用的事件，经常使用键盘事件用以检测文本输入。键盘事件有以下几种： • keydown：当用户按下键盘按键时触发keydown事件。如果一直按着某按键，会一直不断的触发keydown事件。 • keypress：当用户按下某按键，并产生一个字符出现的情况下触发keypress事件。注意该事件要求按键必须产生字符，意味着特殊功能键不能触发该事件。 • keyup：用户按下按键被弹起时，触发keyup事件。
13.2 事件流（ event flow ）
事件流开发者认为当有界面元素触发事件时，该元素的容器控件及整个页面都按照特定顺序响应该元素触发的事件，事件发生顺序即事件流。主要包括冒泡型事件流、捕获型事件流和 DOM事件流。
13.2.1 冒泡型事件
• IE提供的事件流就是冒泡型事件流，冒泡型事件流的核心思想是依照触发事件的控件的父控件的层级顺序依次触发，即事件由明确的事件源到最不确定的事件源依次触发。最不确定的事件源一定是document对象，因为所有的事件源都是document对象的子控件，即所有事件源的根对象都是 document对象。 • 冒泡型事件流的核心思想是，依照触发事件的控件的父控件的层级顺序依次触发，所以当单击按钮时，事件会按照以下顺序依次触发： – <input type=button>。 – <body>。 – Document对象。
13.4.1 IE与DOM中的事件对象
IE Firfox 中的代码 • 中的代码在IE中，事件对象是以window 对象的 event属性形式出现 div.onclick=function() div.onclick=function() 的。可以使用事件处理函数访问事件 { { var event=window.event; var event=arguments[0]; alery(event); alery(event); } } • 在IE中，event对象仅仅在事件发生时可以访问，事件处理函数执行完毕后，event对象马上被销毁。 • 在Firefox中，遵循DOM标准实现了event对象。event对象必须作为唯一的参数传递给事件处理函数。可以通过以下代码在Firefox中获得event对象。
IE事件模型
attachEvent（eventnaபைடு நூலகம்e,handler) 事件名与DOM 0 一样
事件传播简介
冒泡型（IE支持）捕获型（网景浏览器支持）从根到目标元素再从目标元素到根的模型称为 DO2 事件传播模型（Firefox，chrome）
事件参数简介
某个事件引发的时候，传递给时间处理函数用的一个Event对象，一般用这个对象可以得到引发事件的元素以及鼠标位臵等等 IE浏览器把这个参数作为window的一个属性，其它支持DOM标准的浏览器一般是事件引发的时候创建event对象，并传递给事件处理函数 If(!event） event=window.event; var target = (event.target)? event.target:event.srcElement //srcElement是 IE的实现手法
第十三讲事件
13.1 事件的相关概念
• 行为：“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，行为是动作触发的条件(如onMouseOver、onMouseOut、onClick)例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化 (前面介绍过的轮替图像)，就导致发生了一个动作，动作通常是一段JaveScript代码。与行为相关的有三个重要的部分——对象、事件和动作 1. 对象(Object) 对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。
13.1 基本概念
4. 事件与动作 • 将事件和动作组合起来就构成了行为，例如，将onClick 行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。 • 在HTML控件中，内臵了JavaScript事件。在Web开发中，JavaScript与HTML交互都是通过HTML控件引发 JavaScript事件进行的。 • 响应事件 – 选择元素 – 对选择的元素进行操作
13.1 基本概念
2. 事件(Event) • 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。 • 不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。 3. 动作(Action) 行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码， Dreamweaver内臵的行为往页面中添加JaveScript代码，就不必自己编写。
13.4.2 IE与DOM中event对象的共性
• 在事件实现上，IE和Firefox保持一定的独立性。但是在实现过程中，它们还是保持了相当的共性。本节将讨论IE与 Firefox在事件对象中保持的共性。 • 下面是对IE中event对象与DOM event对象共性的总结。 (1)获取事件类型的相似之处 – 获取按键代码（keydown/keyup事件） – 检测Shift、Ctrl、Alt按键 – 获取客户端浏览器区域鼠标指针坐标 – 获取客户端鼠标指针屏幕坐标。
13.4 事件对象
• 在进行跨浏览器的开发中，获取事件信息是非常重要的。所以需要创建事件对象，事件对象应该包括这样一些信息 – 事件源。 – 事件发生时的鼠标信息（实际上大部分事件是由鼠标操作触发的）。 – 事件发生时的键盘信息。 – 事件对象必须遵循当事件发生时被创建，而事件处理结束时就被销毁。这样做的原因完全出于效率和安全方面的考虑。 • 首先学习IE与DOM中的事件对象。
13.2.2 捕获型事件流
• 捕获型事件流的核心思想是，依照触发事件的事件源对象的根节点依次触发，直到触发明确事件源对象。实际上捕获型事件流的实现和冒泡型事件流正好相反，捕获型事件流从最不明确的事件源依次触发事件，直至触发到特定事件源的事件。即捕获型事件流从document对象开始触发事件，直到触发至明确事件源。 • Firefox中为以下顺序。 – Document对象。 – <body>。 – <input type=button>。
13.5 事件类型
• 在IE和Firefox中，根据触发事件的对象对事件进行了分类，DOM标准定义了几种事件类型如下所示： • 鼠标事件：使用鼠标指针触发的事件。 • 键盘事件：使用键盘输入或键盘按键状态改变触发的事件。 • HTML事件：当前HTML文档发生改变或HTML文档与服务器交互而触发的事件。 • 突变事件：底层DOM结构发生改变触发的事件。首先学习鼠标事件，鼠标事件是JavaScript开发中使用最多的事件，所以非常重要，请仔细阅读。
13.3 事件处理函数和监听函数
• 冒泡型事件流是IE唯一支持的事件流形式，而Firefox对冒泡型事件流和捕获型事件流都支持，实际上Firefox中实现了DOM事件流。 • 下面将要学习事件处理函数和监听函数。
13.3.1 IE中的事件处理函数
• 所有的事件都具有特定的名称，如click（单击）、load（载入）、mouseover（鼠标经过）等。用于响应特定事件的函数在IE中被称之为事件处理函数（event handler），而在严格遵循DOM标准的浏览器中被称为事件监听函数（event listener）。 • 添加事件处理函数有2种形式。在JavaScript中动态添加或在HTML代码中分配事件处理函数。如果由JavaScript动态添加事件处理，首先要获得添加事件处理的节点对象，然后将事件处理函数赋值给对应的事件处理函数属性。
13.5.1 鼠标事件
2．鼠标事件中event对象：在鼠标事件被触发时，都会对 event对象的一些属性赋值： • 鼠标指针的坐标属性（比如clientX和clientY）。 • type属性。 • srcElement或者target属性。 • button属性。 • shiftKey、ctrlKey、altKey和metaKey属性。

第13讲 事件

第13讲事件