《网页设计与制作（HTML+CSS+JavaScript）》课件_CORE-11.pptVIP

第十一章事件处理目标理解事件的概念。能够指定、编写事件的处理程序。掌握窗口事件、鼠标事件、表单事件的相关应用。概述、专业术语事件是用户所做的，或系统自动生成的动作。通过创建响应这种动作的处理程序，可以使得网页更具交互性。当今流行的应用程序，不论是Windows应用程序还是Web应用程序，都是基于事件驱动的原理。指定事件处理程序JavaScript脚本处理事件主要通过显式声明的方式实现，即我们所说的定义的方式，此外还可以通过匿名函数、手动触发等方式来指定事件的处理程序。下面我们将详细讲解显式声明方式，请看下面的示例。htmlheadtitle显式声明/title scriptlanguage=javascriptfunctionshowWindows(){for(vari=0;i5;i++){window.open(virus.html,,);}}/script/headbodyforminputtype=buttononClick=showWindows()value=单击打开窗口/form/body/html指定事件处理程序在浏览器中打开这个网页，其效果如右图11-1所示：单击按钮，触发onClick事件，出现我们熟悉的病毒效果，然而真正的病毒是要让IE不断的弹出新窗口，也就是让我们的“showWindows”函数的循环条件永远为真，但这里我们限于教材的需要只让它弹出5个新窗口，如右图11-2所示：事件详情窗口事件窗口事件是当用户操作浏览器窗口时触发的事件。最常用的窗口事件有onLoad事件（载入事件）、onUnload（关闭事件）、onFocus事件（焦点事件）、onBlur事件（失去焦点事件）、onResize（调整窗口大小事件）等事件详情当用户进入页面且页面元素都加载完成后就触发了onLoad事件。页面的显示效果如右图11-3所示：单击“确定”后，再点击第二个文本框，此时第二个文本框获得了焦点触发onFocus事件，效果如右图11-4所示：事件详情单击“确定”后，再点击页面上除了第二个文本框以外的任意部分使得第二个文本框失去焦点，此时就触发了第二个文本框的失去焦点事件即onBlur事件。效果如右图11-5所示：单击“确定”后，接下来我们关闭此窗口事件的页面，这时就会触发窗口事件页面的onUnload事件，显示效果如右图11-6所示：事件详情鼠标事件主要的鼠标事件包括：onClick事件onDblClick事件onMouseOver事件onMouseOut事件onMouseDown事件onMouseUp事件onMouseMove事件事件详情下面两个例子让大家认识一下鼠标事件。htmlheadtitle显示鼠标坐标/title/headbodyonMouseMove=microsoftMouseMove()centertableborder=1trtdalign=centerfontcolor=#FF0000size=6下面为脚本显示区/font/td/trtrtdalign=centerheight=80scriptlanguage=javascriptfunctionmicrosoftMouseMove(){document.test.x.value=window.event.x;document.test.y.value=window.event.y;}/scriptformname=testX:inputname=xtype=textsize=4Y:inputtype=textname=ysize=4/form/td/tr/table/center/body/html事件详情在浏览器中打开这个网页，效果如下图11-7所示：在代码中使用了鼠标的onMouseMove事件，以便在页面的对应文本框中显示鼠标的坐标，在网页中以浏览器的可视区域的左上角为坐标原点。其中“window.event.x”用来获