网页设计与制作教程Web前端开发（第7版）课件：JavaScript事件处理-window事件.pptx

JavaScript事件处理window事件window（窗口）事件是指当用户与页面上的元素交互时所触发的事件。

目录JavaScript事件处理10.1事件概述10.2window事件10.3mouse事件10.4keyboard事件10.5form事件10.6事件捕捉与事件冒泡习题10

10.2window事件常用的window事件见表。

window事件的语法格式有下面三种：1）HTML中（一般应用到body标签）：bodyon事件名=myScript2）JavaScript中：window.on事件名=function(){myScript};3）JavaScript中使用addEventListener()方法：window.addEventListener(事件名,myScript,false);10.2window事件

10.2.1load事件1.通过JavaScript指定load事件处理程序建议在JavaScript中指定load事件处理程序，使用下面两种方法：window.onload=function(){myScript};window.addEventListener(load,myScript,false);10.2window事件

【例10-6】load事件绑定事件处理程序，本例文件10-6.html在浏览器中打开后首先弹出消息框，在两个消息框中分别显示div元素和p元素中的内容，如图所示。10.2window事件

!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleLoad事件/title/headscripttype=text/javascriptwindow.addEventListener(load,myfun,false);functionmyfun(){vardiv1Obj=document.getElementById(div1);varp1Obj=document.getElementById(p1);alert(div1的内容:+div1Obj.innerText);alert(p1的内容:+p1Obj.innerText);}/scriptbodydivid=div1DIV1pid=p1段落文字P1/p/div/body/html10.2window事件

2.在body标签中上触发load事件在body标签中通过onload属性来指定，方法如下：bodyonload=myScript例如，下面代码在body标签上触发load事件：bodyonload=window.alert(欢迎访问本网站!)10.2window事件

3.当图像加载完毕时在img元素上触发load事件【例10-7】本例代码在加载图片完成后执行load事件函数ImageLoad()，在事件函数中给图片加上边框，并弹出消息框，本例文件10-7.html在浏览器中显示如图10-4所示。10.2window事件

!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleLoad事件/title/headscripttype=text/javascriptfunctionImageLoad(){myimg=document.getElementById(img1);myimg.style.border=6pxsolid#007799;alert(图片加载完成后，给该图片加边框);}/scriptbodyimgid=img1src=images/js.jpgonload=ImageLoad()/body/html10.2window事件

10.2.2resize事件【例10-8】本例代码当浏览器被重置大小时触发resize事件，执行WindowChange()函数，本例文件10-8.html在浏览器中显示如图10-5所示。10.2window事件

!DOCTYPEhtmlhtmlhead