第05章-事件处理.ppt

Click to edit title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,第,5,章 事件处理,*,Click to edit title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,第,5,章 事件处理,*,JavaScript,语言与,Ajax,应用（第二版,）,主编 董宁 陈,丹,中国水利水电,出版社,第,5,章 事件处理,目 录,第,5,章 事件处理,5.1,浏览器中的事件,5.2,事件与,DOM,5.3,用,JavaScript,处理事件,5.4,事件处理高级应用,5.1,浏览器中的事件,第,5,章 事件处理,事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。事件的复杂程度大不相同，简单的如鼠标的移动、当前页面的关闭、键盘的输入等，复杂的如拖曳页面图片或单击浮动菜单等。,事件处理器是与特定的文本和特定的事件相联系的,JavaScript,脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。,5.1,浏览器中的事件,第,5,章 事件处理,HTML,文档事件可以分为浏览器事件和,HTML,元素事件两大类。在这里我们着重介绍浏览器事件。,HTML,文档将元素的常用事件（如,onclick,、,onmouseover,等）当作属性捆绑在,HTML,元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑则将特定的代码放置在其所处对象的事件处理器中。,浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件,onload,、关闭该文档事件,onunload,、浏览器失去焦点事件,onblur,、获得焦点事件,onfocus,等。,第,6,章 面向对象的高级应用及,C#,语法新特性,5.1,浏览器中的事件,第,5,章 事件处理,【,例,5-1】,浏览器中的事件。,5-1,window.onload=function(),var msg=nwindow.load,事件,:nn;,msg+=,浏览器载入了文档,!;,alert(msg);,window.onfocus=function(),var msg=nwindow.onfocus,事件,:nn;,msg+=,浏览器取得了焦点,!;,alert(msg);,window.onblur=function(),var msg=nwindow.onblur,事件,:nn;,msg+=,浏览器失去了焦点,!;,alert(msg);,5.1,浏览器中的事件,第,5,章 事件处理,window.onscroll=function(),var msg=nwindow.onscroll,事件,:nn;,msg+=,用户拖动了滚动条,!;,alert(msg);,window.onresize=function(),var msg=nwindow.onresize,事件,:nn;,msg+=,用户改变了窗口尺寸,!;,alert(msg);,5.1,浏览器中的事件,第,5,章 事件处理,window.onscroll=function(),var msg=nwindow.onscroll,事件,:nn;,msg+=,用户拖动了滚动条,!;,alert(msg);,window.onresize=function(),var msg=nwindow.onresize,事件,:nn;,msg+=,用户改变了窗口尺寸,!;,alert(msg);,5.1,浏览器中的事件,第,5,章 事件处理,载入文档,:,取得焦点,:,失去焦点,:,拖动滚动条,:,变换尺寸,:,当载入该文档时，触发,window.onload,事件；当把焦点给该文档页面时，触发,window.onfocus,事件；当该页面失去焦点时，触发,window.onblur,事件；当用户拖动滚动条时，触发,window.onscroll,事件；当用户改变文档页面大小时，触发,window.onresize,事件。,5.2,事件与,DOM,第,5,章 事件处理,JavaScript,代码的核心是由事件把所有东西融合在一起。在一个设计良好的,JavaScript,应用程序里，都会拥有数据源（被解析为,DOM,的,HTML,文档）和它的视觉的表示（浏览器显示的,HTML,页面）。为了同步这两个方面，还必须监视用户的交互动作并试图相应地更新用户界面。,DOM,和,JavaScript,事件的结合是任何现代,Web,应用程序赖以工作的至关重要的组合。,事件是,DOM,的一部分，在,DOM Level 1,中未定义任何事件，只在,DOM Level 2,中才定义了一小部分子集，完整的事件是在,DOM Level 3,中规定的。由于早前没有标准指导，事件都是由浏览器开发者自己发明的模型实现的。尽管事件在不同的浏览器之间存在不同的,DOM,实现，但一些基本的性质还是相同的。下面我们看看在,DOM,事件处理中的一些关键技术。,5.2,事件与,DOM,第,5,章 事件处理,1,事件流,在二级,DOM,标准中，事件处理程序比较复杂，当事件发生的时候，目标节点的事件处理程序就会被触发执行，但是目标节点的父节点也有机会来处理这个事件。事件的传播分为三个阶段，首先是捕捉阶段，事件从,document,对象沿着,DOM,树向下传播到目标节点，如果目标的任何一个父节点注册了捕捉事件的处理程序，那么事件在传播的过程中就会首先运行这个程序；下一个阶段就是发生在目标节点自身了，注册在目标节点上的相应的事件处理程序就会执行；最后是起泡阶段，事件将从目标节点向上传回给父节点，同样，如果父节点有相应的事件处理程序也会处理。在,IE,中，没有捕捉的阶段，但是有起泡的阶段。可以用,stopPropagating(),方法来停止事件传播，也就是让其他元素对这个事件不可见，在,IE 6,中，就是把,cancelBubble,设置为,true,。,5.2,事件与,DOM,第,5,章 事件处理,2,注册事件处理程序,和,IE,一样，,DOM,标准也有自己的事件处理程序，不过,DOM,二级标准的事件处理程序比,IE,的强大一些，事件处理程序的注册用,addEventListner(),方法，该方法有三个参数，第一个是事件类型，第二个是处理的函数，第三个是一个布尔值。,true,表示制定的事件处理程序将在事件传播的阶段用于捕捉事件，否则就不捕捉；当事件发生在对象上才触发执行这个事件处理的函数，或者发生在该对象的字节点上，并且向上起泡到这个对象上的时候，触发执行这个事件处理的函数。例如：,document.addEventListener(mousemove,moveHandler,true);,5.2,事件与,DOM,第,5,章 事件处理,3,二级,DOM,标准中的,Event,和,IE,不同的是，,W3C DOM,中的,Event,对象并不是,window,全局对象下面的属性，换句话说，,event,不是全局变量。通常在,DOM,二级标准中，,event,作为发生事件的文档对象的属性。,Event,对象含有两个子接口，分别是,UIEvent,和,MutationEvent,，这两个子接口实现了,Event,对象的所有方法和属性，而,MouseEvent,接口又是,UIEvent,的子接口，所以实现了,UIEvent,和,Event,的所有方法和属性。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.1,利用伪链接处理事件,所谓伪链接是人们对非标准化通信机制的统称。而,“,真,”,链接特指那些用来在因特网上的两台计算机之间传输各种数据包的标准化通信机制，如：,,、,ftp:/,等。,JavaScript,伪链接就是使用,a,标签的,href,属性来运行,JavaScript,的一种方法，例如：,link,当你点击这个链接的时候，页面不发生跳转，但是会运行,callback(),这个方法。,在多数支持,JavaScript,脚本的浏览器中，可以通过,JavaScript,伪,URL,地址调用语句来引入,JavaScript,脚本代码。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.2,内联的事件处理,在一个元素的属性中绑定事件，实际上就创建了一个内联事件处理函数，比如：,.,通过事件属性，事件处理函数也可以直接用到,HTML,元素上。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,1,内联事件处理函数的作用域链,与其他函数不同，内联事件处理函数的作用域链从头部开始依次是：调用对象、该元素的,DOM,对象、该元素所属表单的,DOM,对象（如果有）、,document,对象、,window,对象（全局对象）。比如下面代码：,5.3,用,JavaScript,处理事件,第,5,章 事件处理,就相当于：,document.getElementsByTagName(input)0.onclick=function(),with(document),with(this.form),with(this),alert(compatMode);,5.3,用,JavaScript,处理事件,第,5,章 事件处理,2,内联事件处理函数的作用域链在各浏览器中的差异,各浏览器都会将内联事件处理函数所属的元素的,DOM,对象加入到作用域链中，但加入的方式却是不同的。如以下代码：,在所有浏览器中，都将弹出显示,“,hello,”,的对话框。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,再修改代码改变,input,元素的内联事件处理函数的执行上下文：,var target=document.getElementsByTagName(input)0;,var o=,onclick:target.onclick,value:Hi,Im here!,;,o.onclick();,在,IE,浏览器中运行的结果为弹出显示,“,Hi,Im here!,”,的对话框，在,Firefox,中运行的结果为弹出显示,“,hello,”,的对话框。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.3,无侵入的事件处理,很多情况下，,JavaScript,代码往往内嵌在,HTML,文件的元素标签内。例如，下面是一个典型的,JavaScript,代码内嵌在,HTML,文件的元素标签内：,然而，,HTML,主要是用来描述页面的结构，而不是实现行为的。倘若将二者结合在一起会直接影响网站的可维护性，所以不推荐这两者相结合。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,现在编写,JavaScript,代码都是为了使它与,HTML,页面非侵入地交互。为实现这一点，可以结合三种技术来使一个,Web,应用程序以非侵入的形式被构造：,首先，,Web,应用程序中的所有功能都应经过验证。比如说，如果你希望访问,DOM,，你需要验证它存在且具有你需要使用的所有的功能，比如使用如下代码：,if(document&document.getElementById),然后，使用,DOM,来快速而一致地访问你文档中的元素。,最后，使用,DOM,和,addEvent,函数动态地将所有事件绑定到文档中。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.4 window.onload,事件,操作,HTML DOM,文档的一个难题是，,JavaScript,代码可能在,DOM,完全载入之前运行，这会导致代码产生一些问题。页面加载时浏览器内部操作的顺序大致是这样的：,HTML,被解析,外部脚本,/,样式表被加载,文档解析过程中内联的脚本被执行,HTML DOM,构造完成,图像和外部内容被加载,页面加载完成。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,1,等待大部分,DOM,加载,在,HTML,页面中内联的,JavaScript,代码实际上是在,DOM,构造过程中解析到了代码就执行的。这就是说如果有一段内联的,JavaScript,代码嵌在页面的中间部分，则该,JavaScript,代码只能立即拥有前半部分,DOM,的访问权。然而，把,JavaScript,代码作为后续的元素嵌入页面中，就意味着我们能够有效地对先于它出现的所有的,DOM,元素进行访问，获得一种虚拟的模拟,DOM,加载的方式。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,Testing DOM Loading,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,是否已经具有了所需的特性。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,有下面几种方式可以用来检查以判断,DOM,是否已经可以操作了：,document,：用来检查,DOM document,是否已经存在；,document.getElementsByTagName(),和,document.getElementByID(),：检查,document,是否已经具备了经常使用的,getElementsByTagName(),和,getElementById(),函数，这些函数将在它们准备好被使用以后存在；,document.body,：作为额外的保障，检查,body,元素是否已完成被载入。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,【例,5-2】,使用,domReady(),函数在判定,DOM,何时准备好需要被获取和操作的元素。,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,语言一直以来不断推进的追求。起初，浏览器强制用户将事件处理代码内联地写在,HTML,代码中。当,IE,与,NetScape,（,FireFox,的前生）激烈竞争的时候，它们各自开发出两个独立但又非常相似的注册事件的模型，最终,NetScape,的模型被修改成为,W3C,标准，而,IE,的则保持不变。目前存在三种可用的注册事件的方式，传统方式是老式的内联附加事件处理函数方式的一个分支，但是它很可靠而并能一致地工作，另外两种是,IE,和,W3C,的注册事件的方式。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.6,对不同浏览器绑定事件,绑定事件侦听器的最大问题，就是,IE,和其他浏览器的处理方式不一祥。下面我们看一下对不同浏览器如何绑定事件侦听器。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,1,W3C,标准,W3C,中的,DOM,元素绑定事件处理函数的方法是这方面唯一真正的标准方式。除了,IE,，所有其它的现代浏览器都支持这一事件绑定的方式。绑定事件处理函数的代码很简单，它作为每一个,DOM,元素的名为,addEventListener,的方法存在，接收,3,个参数：事件的名称（如,click,），处理事件的函数，以及一个来用使用或禁用事件捕获的布尔标志。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,2,在,IE,浏览器中绑定事件,在许多方面，,IE,的绑定事件的方式看起来跟,W3C,的非常相似。但是，触及细节的时候，它又在某些方面有着非常显著的不同。下面代码是,IE,中绑定事件处理函数的一些例子。,/,找到第一个,元素并为它附加,“,提交,”,事件处理函数,document.getElementsByTagName(form)0.attachEvent(onsubmit,function(),/,具体代码,);,5.3,用,JavaScript,处理事件,第,5,章 事件处理,/,为文档的,body,元素附加一个按键事件处理函数,document.body.attachEvent(onkeypress,myKeyPressHandler);,/,为页面的加载事件附加一个处理函数,window.attachEvent(onload,function(),);,IE,所用的绑定事件的方法叫做,attachEvent(),，它只有两个参数：事件名称（带,on,前缀）和要调用的事件处理函数。,element.attachEvent(onclick,，,functionname);,5.3,用,JavaScript,处理事件,第,5,章 事件处理,为了让我们的页面能在所有浏览器上都有效，只得分别用两段代码，将添加事件监听器的代码封装成一个可重用的函数，代码如下：,function addListener(element,event,listener),if(element.addEventListener),element.addEventListener(event,listener,false);,else if(element.attachEvent),element.attachEvent(on+event,listener);,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.7,事件参数,this,关键字提供了一种在函数作用域中的访问当前对象的方式。浏览器使用,this,关键字给所有的事件处理函数提供上下文信息。我们可以只建立一个通用的函数来处理所有点击而通过,this,关键来确定作用于哪一个元素，它将如预期地工作。,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;,上面的程序运行时，在点击页面中的,li,元素时能改变其背景色。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,5.3.8,取消事件默认行为,在知道怎么调用事件的同时，有时候我们也需要取消事件。比如在验证表单的时候，如果用户输入了无效数据，那么我们需要告诉浏览器阻止表单提交。,5.3,用,JavaScript,处理事件,第,5,章 事件处理,下面看一下密码验证的例子：,var passcode=document.getElementById(passcode);,passcode.regexp=/0-9+$/;,document.getElementById(frm).onsubmit=function(),var passcode=document.getElementById(passcode);,if(!passcode.regexp.test(passcode.value),alert(,密码格式不正确！,);,return false;,5.4,事件处理高级应用,第,5,章 事件处理,5.4.1,事件的捕捉与冒泡,事件触发的时候，首先从最高层的文档开始，向下传播到实际发生单击的元素（捕捉阶段），然后反过来向上传播事件（冒泡阶段）。在这种,W3C,标准方式里，事件处理器可以放在任意一个阶段。如果在捕捉阶段停止了事件，下方的元素就不会接收到事件。类似地，在冒泡阶段也可以停止事件，不让它继续向上冒泡。,5.4,事件处理高级应用,第,5,章 事件处理,图,5-1,事件捕捉和事件冒泡,图,5-1,显示的就是事件捕捉和事件冒泡的流程。,5.4,事件处理高级应用,第,5,章 事件处理,冒泡型事件的基本思想是：事件按照从最特定的事件目标到最不特定的事件目标（,document,对象）的顺序触发。例如，如果有下面的页面：,冒泡过程,Click Me,5.4,事件处理高级应用,第,5,章 事件处理,如果用户使用,IE,浏览器并点击了页面中的,div,元素，则事件按以下顺序,“,冒泡,”,：,div,、,body,、,html,、,document,。,5.4,事件处理高级应用,第,5,章 事件处理,DOM,同时支持两种事件模型：捕获型事件和冒泡型事件。但是，捕获型事件先发生。两种事件流会触及,DOM,中的所有对象，从,document,对象开始，也在,document,对象结束（大部分兼容标准的浏览器会继续将事件的捕获,/,冒泡延伸至,windows,对象）。,再考虑前面的例子，在与,DOM,兼容的浏览器中点击,div,元素时，事件流的进行如图,5-4,所示：,5.4,事件处理高级应用,第,5,章 事件处理,图,5-4 DOM,事件流,5.4,事件处理高级应用,第,5,章 事件处理,5.4.2,使用事件委托,有时候要绑定的元素实在太多，需要频繁地在,DOM,中增加响应某些事件的新元素，一个个地添加事件处理实在太繁琐，这时可以使用事件委托。,事件冒泡使得,DOM,远离事件发生地的上层元素也能接收到事件（如图,5-6,所示），这就是事件委托的基本原理。我们可以在上层接收事件，然后通过事件对象的,target,属性（,IE,中是,srcElement,属性）判断事件到底来源于那个元素。,5.4,事件处理高级应用,第,5,章 事件处理,下面我们设计一个简单的代码来演示什么是事件委托。,【,例,5-3】,事件委托实例。,5-3,li,padding:80px 20px;,width:200px;,list-style:none;,float:left;,border:1px solid blue;,text-align:center;,5.4,事件处理高级应用,第,5,章 事件处理,function checkPiece(evt),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,事件处理高级应用,第,5,章 事件处理,鲨鱼,狮子,老虎,大象,海豚,松鼠,犀牛,斑马,5.4,事件处理高级应用,第,5,章 事件处理,1,搜索冒泡中遇到的元素,查找过程中从事件的目标元素开始，跟随着,parentNode,逐层向树根方向移动，每到一层就检查它是否我们要找的元素。例如：,To test,To test,To test,To test,5.4,事件处理高级应用,第,5,章 事件处理,如果我们想知道用户是否单击了列表中类名为,theOne,的项目，就可以遍历所有元素，凡是类名为,the0ne,的，就给它添加一个事件处理器。该功能也可以使用事件委托来更方便的实现，如下所示：,function evtHandler(evt),evt=evt|window.event;,var currentElement=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;,5.4,事件处理高级应用,第,5,章 事件处理,采用事件委托，只需要给最外层的列表容器添加一个事件处理器，列表范围内任何元素发生单击都会被捕捉到。,currentElement,变量一开始保存的是事件的目标元素，我们需要检查它是不是一个有效的元素（因为在循环过程中有可能使它成,null,）。我们还要检查当前元素是不是触发事件处理的元素,evtElement,。理论上可以一直向上查找，直到文档的最高层，那时,parentNode,将等于,null,，我们在循环条件中检查了当前元素是否存在。,5.4,事件处理高级应用,第,5,章 事件处理,2,事件委托不适用的情况,有时候事件委托并非最合适的解决之道。使用固定定位、相对偏移定位、绝对定位等方式，可使一个,HTML,元素叠在另一个不属于同一树结构的元素上方，这种情况下事件委托往往不适用。,本章小结,第,5,章 事件处理,本章介绍了事件的概念，以及浏览器中的事件的运行。着重介绍了,JavaScript,处理事件的方法。还学习了如何利用,DOM,绑定事件，以及不同浏览器中不同的处理方法。,这一章还讲述了事件流的概念，以及两种不同的事件流：冒泡型和捕捉型，并都做了详细介绍。,后面章节将以本章介绍的内容为基础，不仅解释前面用过的一些技巧背后的原理，还会进一步深入到更高级的,JavaScript,编程，还将学习到一些由于,JavaScript,库的出现而变得十分流行的技术。,