最新JavaScript语言与Ajax应用第05章 事件处理(共53张PPT课件).pptx

《最新JavaScript语言与Ajax应用第05章 事件处理(共53张PPT课件).pptx》由会员分享，可在线阅读，更多相关《最新JavaScript语言与Ajax应用第05章 事件处理(共53张PPT课件).pptx（53页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、主编(zhbin) 董宁 陈丹中国水利水电出版社第一页，共五十三页。第 5 章 事件处理第二页，共五十三页。目 录第5章 事件处理 5.1 浏览器中的事件浏览器中的事件 5.2 事件与事件与DOM 5.3 用用JavaScript处理事件处理事件 5.4 事件处理高级事件处理高级(goj)应用应用 第三页，共五十三页。5.1 浏览器中的事件(shjin) 第5章 事件处理事件是指用户载入目标页面(y min)直到该页面(y min)被关闭期间浏览器的动作及该页面(y min)对用户操作的响应。事件的复杂程度大不相同，简单的如鼠标的移动、当前页面(y min)的关闭、键盘的输入等，复杂的如拖曳页

2、面(y min)图片或单击浮动菜单等。 事件处理器是与特定的文本和特定的事件相联系的 JavaScript 脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。第四页，共五十三页。5.1 浏览器中的事件(shjin)第5章 事件处理 HTML 文档事件可以分为浏览器事件和HTML 元素事件两大类。在这里我们着重介绍浏览器事件。 HTML 文档将元素的常用事件（如onclick、onmouseover 等）当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器

3、。事件捆绑则将特定的代码放置在其所处(su ch)对象的事件处理器中。 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。第6章 面向对象的高级应用及C#语法(yf)新特性第五页，共五十三页。5.1 浏览器中的事件(shjin)第5章 事件处理【例5-1】浏览器中的事件。 5-1 window.onload = function() var msg = nwindow.load 事件: nn; msg += 浏览器载入了文档!; alert(msg); wind

4、ow.onfocus = function() var msg = nwindow.onfocus 事件: nn; msg += 浏览器取得了焦点(jiodin)!; alert(msg); window.onblur = function() var msg = nwindow.onblur 事件: nn; msg += 浏览器失去了焦点!; alert(msg); 第六页，共五十三页。5.1 浏览器中的事件(shjin)第5章 事件处理window.onscroll = function() var msg = nwindow.onscroll 事件: nn; msg += 用户(yngh

5、)拖动了滚动条!; alert(msg); window.onresize = function() var msg = nwindow.onresize 事件: nn; msg += 用户改变了窗口尺寸!; alert(msg); 第七页，共五十三页。5.1 浏览器中的事件(shjin)第5章 事件处理 window.onscroll = function() var msg = nwindow.onscroll 事件(shjin): nn; msg += 用户拖动了滚动条!; alert(msg); window.onresize = function() var msg = nwindo

6、w.onresize 事件: nn; msg += 用户改变了窗口尺寸!; alert(msg); 第八页，共五十三页。5.1 浏览器中的事件(shjin)第5章 事件处理 载入文档: 取得焦点: 失去焦点: 拖动滚动条: 变换尺寸(ch cun): 当载入该文档时，触发window.onload事件；当把焦点给该文档页面时，触发 window.onfocus 事件；当该页面失去焦点时，触发 window.onblur 事件；当用户拖动滚动条时，触发 window.onscroll 事件；当用户改变文档页面大小时，触发 window.onresize 事件。第九页，共五十三页。5.2 事件(s

7、hjin)与DOM 第5章 事件处理 JavaScript 代码的核心是由事件把所有东西融合在一起。在一个设计良好的JavaScript 应用程序里，都会拥有数据源（被解析为DOM的HTML文档）和它的视觉的表示（浏览器显示的HTML页面）。为了同步这两个方面，还必须监视用户的交互动作并试图相应地更新用户界面。DOM 和JavaScript 事件的结合是任何现代Web应用程序赖以工作的至关重要的组合。 事件是DOM的一部分，在DOM Level 1中未定义任何事件，只在DOM Level 2中才定义了一小部分子集，完整的事件是在DOM Level 3中规定的。由于早前没有标准指导，事件都是由浏

8、览器开发者自己发明的模型实现的。尽管事件在不同的浏览器之间存在不同的DOM实现，但一些基本的性质还是相同的。下面(xi mian)我们看看在DOM事件处理中的一些关键技术。 第十页，共五十三页。5.2 事件(shjin)与DOM第5章 事件处理1事件流在二级DOM标准中，事件处理程序比较复杂，当事件发生的时候，目标节点的事件处理程序就会被触发执行，但是目标节点的父节点也有机会来处理这个事件。事件的传播分为三个阶段，首先是捕捉阶段，事件从document对象沿着DOM树向下传播到目标节点，如果目标的任何一个父节点注册了捕捉事件的处理程序，那么(n me)事件在传播的过程中就会首先运行这个程序；下

9、一个阶段就是发生在目标节点自身了，注册在目标节点上的相应的事件处理程序就会执行；最后是起泡阶段，事件将从目标节点向上传回给父节点，同样，如果父节点有相应的事件处理程序也会处理。在IE中，没有捕捉的阶段，但是有起泡的阶段。可以用stopPropagating()方法来停止事件传播，也就是让其他元素对这个事件不可见，在IE 6中，就是把cancelBubble设置为true。第十一页，共五十三页。5.2 事件(shjin)与DOM第5章 事件处理2注册事件处理程序 和IE一样，DOM标准也有自己的事件处理程序，不过DOM二级标准的事件处理程序比IE的强大一些，事件处理程序的注册用addEventL

10、istner()方法，该方法有三个参数，第一个是事件类型，第二个是处理的函数，第三个是一个布尔值。true表示制定的事件处理程序将在事件传播的阶段用于捕捉事件，否则就不捕捉；当事件发生在对象(duxing)上才触发执行这个事件处理的函数，或者发生在该对象(duxing)的字节点上，并且向上起泡到这个对象(duxing)上的时候，触发执行这个事件处理的函数。例如： document.addEventListener(mousemove,moveHandler,true);第十二页，共五十三页。5.2 事件(shjin)与DOM第5章 事件处理3二级DOM标准中的Event和IE不同的是，W3C

11、DOM中的Event对象并不是window全局对象下面(xi mian)的属性，换句话说，event不是全局变量。通常在DOM二级标准中，event作为发生事件的文档对象的属性。Event对象含有两个子接口，分别是UIEvent和MutationEvent，这两个子接口实现了Event对象的所有方法和属性，而MouseEvent接口又是UIEvent的子接口，所以实现了UIEvent和Event的所有方法和属性。第十三页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理5.3.1 利用伪链接处理事件 所谓伪链接是人们对非标准化通信机制的统称。而“真”链接特指那些用来在因特网

12、上的两台计算机之间传输各种数据包的标准化通信机制，如：http:/、ftp:/等。 JavaScript伪链接就是(jish)使用a标签的href属性来运行JavaScript的一种方法，例如： link 当你点击这个链接的时候，页面不发生跳转，但是会运行callback()这个方法。 在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。第十四页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理5.3.2 内联的事件处理 在一个元素的属性中绑定事件，实际上就创建(chungjin)了一个内联事件处

13、理函数，比如：.通过事件属性，事件处理函数也可以直接用到HTML元素上。 第十五页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理1内联事件处理函数的作用域链与其他函数不同，内联事件处理函数的作用域链从头部开始依次是：调用对象、该元素的 DOM 对象、该元素所属(sush)表单的 DOM 对象（如果有）、document 对象、window 对象（全局对象）。比如下面代码： 第十六页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理就相当于： document.getElementsByTagName(input)0.onclick = functio

14、n() with (document) with (this.form) with (this) alert(compatMode); 第十七页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理2内联事件处理函数的作用域链在各浏览器中的差异 各浏览器都会将内联事件处理函数所属的元素的 DOM 对象(duxing)加入到作用域链中，但加入的方式却是不同的。如以下代码： 在所有浏览器中，都将弹出显示“hello”的对话框。第十八页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理再修改代码改变input元素的内联事件处理函数的执行上下文： var targe

15、t = document.getElementsByTagName(input)0; var o = onclick: target.onclick, value: Hi, Im here! ; o.onclick(); 在IE浏览器中运行(ynxng)的结果为弹出显示“Hi, Im here!”的对话框，在Firefox中运行的结果为弹出显示“hello”的对话框。 第十九页，共五十三页。5.3 用JavaScript处理事件 第5章 事件处理5.3.3 无侵入的事件处理很多情况下，JavaScript代码往往内嵌在HTML文件的元素标签内。例如，下面是一个典型的JavaScript代码内嵌

16、在HTML文件的元素标签内：然而，HTML主要是用来描述页面的结构，而不是实现行为的。倘若将二者结合在一起(yq)会直接影响网站的可维护性，所以不推荐这两者相结合。第二十页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理 现在(xinzi)编写JavaScript代码都是为了使它与HTML页面非侵入地交互。为实现这一点，可以结合三种技术来使一个Web应用程序以非侵入的形式被构造： 首先，Web应用程序中的所有功能都应经过验证。比如说，如果你希望访问DOM，你需要验证它存在且具有你需要使用的所有的功能，比如使用如下代码： if(document&document.getEle

17、mentById) 然后，使用DOM 来快速而一致地访问你文档中的元素。 最后，使用DOM 和addEvent 函数动态地将所有事件绑定到文档中。 第二十一页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理5.3.4 window.onload事件 操作HTML DOM文档的一个难题是， JavaScript 代码可能在DOM 完全载入之前运行，这会导致代码产生一些问题。页面加载时浏览器内部操作的顺序大致是这样的： HTML被解析外部脚本/样式表被加载文档解析过程中内联的脚本被执行(zhxng)HTML DOM 构造完成图像和外部内容被加载页面加载完成。第二十二页，共五十三

18、页。5.3 用JavaScript处理事件第5章 事件处理1等待大部分DOM加载 在HTML页面中内联的JavaScript代码实际上是在DOM构造过程中解析到了代码就执行的。这就是说如果有一段内联的JavaScript代码嵌在页面的中间部分，则该JavaScript代码只能(zh nn)立即拥有前半部分DOM的访问权。然而，把JavaScript代码作为后续的元素嵌入页面中，就意味着我们能够有效地对先于它出现的所有的DOM元素进行访问，获得一种虚拟的模拟DOM加载的方式。 第二十三页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理 Testing DOM Loading

19、function init() alert(The DOM is loaded!); document.getElementsByTagName(h1)0.style.border = 4px solid black; Testing DOM Loading init(); 第二十四页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理2判断DOM 何时加载完成这是一种可用来监视DOM 加载的技术。这一技术的原理是在不阻塞浏览器的前提下尽可能快地反复检查DOM是否已经(y jing)具有了所需的特性。 第二十五页，共五十三页。5.3 用JavaScript处理事件第5章 事件处

20、理有下面几种方式可以用来检查(jinch)以判断DOM是否已经可以操作了： document：用来检查DOM document 是否已经存在； document.getElementsByTagName()和document.getElementByID()：检查document 是否已经具备了经常使用的getElementsByTagName()和getElementById()函数，这些函数将在它们准备好被使用以后存在； document.body：作为额外的保障，检查body元素是否已完成被载入。第二十六页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理【例5-2】使

21、用domReady()函数在判定DOM 何时准备好需要被获取和操作的元素(yun s)。 5-2 domReady(function() alert(The DOM is loaded!); document.getElementsByTagName(h1)0.style.border = 4px solid black; ); Testing DOM Loading 第二十七页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理5.3.5 利用DOM绑定事件 怎样将事件处理程序绑定到页面元素是JavaScript 语言一直以来不断推进的追求。起初，浏览器强制用户将事件处理代码

22、内联地写在HTML代码中。当IE 与NetScape（FireFox的前生）激烈竞争的时候，它们各自开发(kif)出两个独立但又非常相似的注册事件的模型，最终NetScape的模型被修改成为W3C 标准，而IE的则保持不变。目前存在三种可用的注册事件的方式，传统方式是老式的内联附加事件处理函数方式的一个分支，但是它很可靠而并能一致地工作，另外两种是IE和W3C 的注册事件的方式。第二十八页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理5.3.6 对不同浏览器绑定事件绑定事件侦听器的最大问题，就是(jish)IE和其他浏览器的处理方式不一祥。下面我们看一下对不同浏览器如何绑

23、定事件侦听器。第二十九页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理1W3C标准 W3C 中的DOM 元素绑定事件处理函数的方法是这方面唯一真正的标准方式。除了IE，所有其它的现代浏览器都支持这一事件绑定的方式。绑定事件处理函数的代码很简单，它作为每一个DOM元素的名为addEventListener的方法存在，接收3个参数：事件的名称（如click），处理事件的函数，以及一个来用使用或禁用(jn yn)事件捕获的布尔标志。 第三十页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理2 在IE浏览器中绑定事件在许多方面，IE的绑定事件的方式看起来跟W3

24、C 的非常相似。但是，触及细节的时候，它又在某些方面有着非常显著的不同。下面代码(di m)是IE中绑定事件处理函数的一些例子。/找到第一个元素并为它附加“提交”事件处理函数document.getElementsByTagName(form)0.attachEvent(onsubmit,function() /具体代码 );第三十一页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理/为文档的body元素附加一个按键事件处理函数document.body.attachEvent(onkeypress, myKeyPressHandler);/为页面的加载事件附加一个处理函数

25、window.attachEvent(onload, function() );IE所用的绑定事件的方法(fngf)叫做attachEvent()，它只有两个参数：事件名称（带on前缀）和要调用的事件处理函数。element.attachEvent(onclick，functionname);第三十二页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理为了让我们的页面能在所有浏览器上都有效(yuxio)，只得分别用两段代码，将添加事件监听器的代码封装成一个可重用的函数，代码如下：function addListener(element, event, listener) if

26、 (element.addEventListener) element.addEventListener(event, listener, false); else if (element.attachEvent) element.attachEvent(on + event, listener); 第三十三页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理5.3.7 事件参数 this关键字提供了一种在函数作用域中的访问当前对象(duxing)的方式。浏览器使用this关键字给所有的事件处理函数提供上下文信息。我们可以只建立一个通用的函数来处理所有点击而通过this关键来

27、确定作用于哪一个元素，它将如预期地工作。 第三十四页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理/查看所有的元素并给每一个绑定click处理函数var li = document.getElementsByTagName(li);for (var i = 0; i li.length; i+) lii.onclick = handleClick;/click处理函数，调用时改变特定元素的前景色和背景色function handleClick() this.style.backgroundColor = blue; this.style.color = white;上面(

28、shng min)的程序运行时，在点击页面中的li元素时能改变其背景色。第三十五页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理5.3.8 取消事件默认行为 在知道怎么调用事件的同时，有时候我们(w men)也需要取消事件。比如在验证表单的时候，如果用户输入了无效数据，那么我们(w men)需要告诉浏览器阻止表单提交。 第三十六页，共五十三页。5.3 用JavaScript处理事件第5章 事件处理下面(xi mian)看一下密码验证的例子：var passcode = document.getElementById(passcode);passcode.regexp =

29、/0-9+$/;document.getElementById(frm).onsubmit = function() var passcode = document.getElementById(passcode); if(!passcode.regexp.test(passcode.value) alert(密码格式不正确！); return false; 第三十七页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理5.4.1 事件的捕捉与冒泡 事件触发的时候，首先从最高层的文档开始，向下传播到实际发生单击的元素（捕捉阶段(jidun)），然后反过来向上传播事件（冒泡阶段(j

30、idun)）。在这种W3C标准方式里，事件处理器可以放在任意一个阶段。如果在捕捉阶段停止了事件，下方的元素就不会接收到事件。类似地，在冒泡阶段也可以停止事件，不让它继续向上冒泡。 第三十八页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理图5-1 事件(shjin)捕捉和事件(shjin)冒泡 图5-1显示的就是事件捕捉(bzhu)和事件冒泡的流程。 第三十九页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理冒泡型事件(shjin)的基本思想是：事件(shjin)按照从最特定的事件(shjin)目标到最不特定的事件(shjin)目标（document对象）的

31、顺序触发。例如，如果有下面的页面： 冒泡过程 Click Me 第四十页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理 如果用户使用(shyng)IE浏览器并点击了页面中的div元素，则事件按以下顺序“冒泡”： div、body、html、document。 第四十一页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理 DOM同时支持两种事件模型：捕获型事件和冒泡型事件。但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续(jx)将事件的捕获/冒泡延伸至window

32、s对象）。 再考虑前面的例子，在与DOM兼容的浏览器中点击div元素时，事件流的进行如图5-4所示： 第四十二页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理图5-4 DOM事件(shjin)流 第四十三页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理5.4.2 使用事件委托有时候要绑定的元素实在太多，需要频繁地在DOM中增加响应(xingyng)某些事件的新元素，一个个地添加事件处理实在太繁琐，这时可以使用事件委托。 事件冒泡使得DOM远离事件发生地的上层元素也能接收到事件（如图5-6所示），这就是事件委托的基本原理。我们可以在上层接收事件，然后通过事

33、件对象的target属性（IE中是srcElement属性）判断事件到底来源于那个元素。 第四十四页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理下面我们设计一个简单的代码来演示什么(shn me)是事件委托。【例5-3】事件委托实例。 5-3 li padding:80px 20px; width:200px; list-style:none; float:left; border:1px solid blue; text-align:center; 第四十五页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理 function checkPiece(ev

34、t) var evt = evt | window.event; var target = evt.target | evt.srcElement; alert(target.innerHTML); window.onload=function() var el = document.getElementById(pieces); el.onclick = checkPiece; 第四十六页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理 鲨鱼 狮子 老虎 大象 海豚 松鼠 犀牛(x ni) 斑马 第四十七页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理1

35、搜索冒泡中遇到的元素(yun s)查找过程中从事件的目标元素开始，跟随着parentNode逐层向树根方向移动，每到一层就检查它是否我们要找的元素。例如： To test To test To test To test第四十八页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理如果我们想知道用户是否单击了列表中类名为theOne的项目，就可以遍历所有元素，凡是类名为the0ne的，就给它添加一个(y )事件处理器。该功能也可以使用事件委托来更方便的实现，如下所示：function evtHandler(evt) evt = evt | window.event; var cur

36、rentElement = evt.target | evt.srcElement; var evtElement = this; while(currentElement & currentElement != evtElement) if(currentElement.className = theOne) alert(找到目标!); break; / 中断语句 currentElement = currentElement.parentNode; var el = document.getElementById(test);el.onclick = evtHandler; 第四十九页，共

37、五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理采用事件委托，只需要给最外层的列表容器添加一个事件处理器，列表范围内任何元素发生单击都会被捕捉到。currentElement变量一开始保存的是事件的目标元素，我们需要检查它是不是一个有效的元素（因为(yn wi)在循环过程中有可能使它成null）。我们还要检查当前元素是不是触发事件处理的元素evtElement。理论上可以一直向上查找，直到文档的最高层，那时parentNode将等于null，我们在循环条件中检查了当前元素是否存在。 第五十页，共五十三页。5.4 事件处理高级(goj)应用 第5章 事件处理2事件委托不适用的情况

38、有时候事件委托并非最合适的解决之道。使用固定定位、相对偏移定位、绝对定位等方式，可使一个HTML元素叠在另一个不属于同一(tngy)树结构的元素上方，这种情况下事件委托往往不适用。 第五十一页，共五十三页。本章(bn zhn)小结 第5章 事件处理本章介绍了事件的概念，以及浏览器中的事件的运行。着重介绍了JavaScript处理事件的方法。还学习了如何利用DOM绑定事件，以及不同(b tn)浏览器中不同(b tn)的处理方法。这一章还讲述了事件流的概念，以及两种不同的事件流：冒泡型和捕捉型，并都做了详细介绍。后面章节将以本章介绍的内容为基础，不仅解释前面用过的一些技巧背后的原理，还会进一步深入到更高级的JavaScript编程，还将学习到一些由于JavaScript库的出现而变得十分流行的技术。 第五十二页，共五十三页。内容(nirng)总结JavaScript语言与Ajax应用(yngyng)（第二版）。第 5 章 事件处理。第5章 事件处理。var msg = nwindow.onscroll 事件: nn。var msg = nwindow.onresize 事件: nn。function addListener(element, event, listener) 。for (var i = 0第五十三页，共五十三页。