《浏览器的内置对象》由会员分享，可在线阅读，更多相关《浏览器的内置对象（23页珍藏版）》请在金锄头文库上搜索。
1、第 3 节浏览器的内置对象 目标 q理解事件处理程序的概念 q了解JavaScript 中的常用事件 q掌握常用的浏览器对象：qwindow qdocumentqhistoryqlocation2事件处理 q 事件是发生并得到处理的操作事件：电话振铃处理事件3JavaScript 事件处理程序 q JavaScript 事件处理程序就是一组语句，在事件（如点击 鼠标或移动鼠标等）发生时执行 事件处理事件事件处理程序的基本语法是：事件名事件名=“ JavaScript JavaScript 代码代码或调用函数调用函数“ 例如：例如：表示鼠标按下时，将调用执行函数check( ) 。4JavaSc
2、ript 事件 事件名说明 onClick鼠标单击 onChange 文本内容或下拉菜单中的选项发 生改变 onFocus 获得焦点，表示文本框等获得鼠标光标。 onBlur 失去焦点，表示文本框等失去鼠标光标。 onMouseOver 鼠标悬 停，即鼠标停留在图片等的上方 onMouseOut 鼠标移出，即离开图片等所在的区域 onMouseMove鼠标移动，表示在层等上方移动 onLoad 网页文档加载事件 onSubmit 表单提交事件 onMouseDown 鼠标按下 onMouseUp 鼠标弹 起5cardpassmyformfunction myfun1( ) if (docume
3、nt.myform.card.value=“请注意格式：10xxxxxx“)document.myform.card.value=“ ; function myfun2( ) var a=document.myform.card.value;if (a.substr(0,2)!=“10“ | isNaN(a)alert(“格式错误，请重新输入“) ;document.myform.card.focus(); onFocus和onBlur 事件-1文本框获得鼠标焦点时（ onFocus）调用的函数： 清空卡号文本框 文本框失去鼠标焦点时（ onBlur）调用的函数： 判断格式是否正确 focus
4、( )方法 再次获得焦点，即鼠标 光标回到卡号文本框6卡号：密码： onFocus和onBlur 事件-2表单元素样式添加事件处理7onMouseOver和 onMouseDown事件图片切换去科技大学看看!将鼠标移到图片上看看，图片有没有换？添加事件处理 ： 切换图片onMouseOver=“src=dog2.jpg“ 表示本图片的图片名称替换为dog2.jpg。 请注意： 由于外面两端已有双引号，为区别起见，dog2.jpg改用为单 引号括起来。8浏览器对象简介 2-1 http:/Window 窗口对象location 地址对象document 文档对象FORM 表单对象浏览器对象的分层
5、结构window.document.myform.text1 9浏览器对象简介 2-2q浏览器对象的分层结构10Window 对象 7-1 q属性 名称 说说明 documedocume ntnt表示给定浏览器窗口中的 HTML 文档。 historyhistory 包含有关客户访问过 的URL的信息。 locationlocation包含有关当前 URL 的信息。 name设置或检索窗口或框架的名称。 status 设置或检索窗口底部的状态栏中的消息 。 screen包含有关客户端的屏幕和显示性能的信 息。 11Window 对象 7-2 q方法 名称 说明 alert (“m提示信息“)显
6、示包含消息的对话 框。 confirm（“提示信息”）显示一个确认对话 框，包含一个确定 取消按钮 Prompt（”提示信息“）弹出提示信息框open (“url“,“name“)打开具有指定名称的新窗口，并加载 给定 URL 所指定的文档；如果没有提 供 URL，则打开一个空白文档 close ( )关闭当前窗口 setTimeout（”函数”,毫秒数） 设置定时器：经过 指定毫秒值后执行 某个函数 clearTimeout(定时器对象) 12Window 对象 7-3 function openwindow( ) window.open(“google.htm“); function cl
7、osewindow( ) window.close ( ); 使用 Open 方法 打开新窗口 使用 Close 方法 关闭窗口添加单击事件因为window是最顶层的根，所以可以省略 window.open(“google.htm“); 可简写为： open(“google.htm“); close（）方法也是如此。131.插入一个层Layer1，z-index=1； 2.层中插入一幅图片。3.定时器函数setTimeout （）的用法：setTimeout（“调用的函数名”，间隔的毫秒数）表示每隔多少毫秒，就循环调用某个函数来执行 清除某个定时器：clearTimeout（）方法。 例如：
8、var myclocksetTimeout（”move( )”,500）; if () clearTimeout（myclock）;；Window 对象 7-4 14function move( ) document.getElementById(“Layer1“).style.left= Math.random()*500; document.getElementById(“Layer1“).style.top= Math.random()*500; setTimeout(“move()“,1000); 随机漂浮的广告Window 对象 7-5 定义层图片移动 的函数move( ) 每隔1秒
9、调用move( )函数 随机改变层的位置，从而 实现随机漂浮的效果getElementById(“ID名称”) 方法：根据ID名称获取HTML元素 ， 这里表示获取层对象Layer1。 left和top表示层Layer1的左边距和上边距，设定为随机的值。15Document 对象 3-1 q属性名称 说说明 alinkColor设置或检索文档中所有活动链 接的颜色 bgColor设置或检索 Document 对象的背景色 body指定文档正文的开始和结束linkColor设置或检索文档链接的颜色location包含关于当前 URL 的信息 title包含文档的标题url设置或检索当前文档的 U
10、RLvlinkColor设置或检索用户访问过 的链接的颜色 16Document 对象 3-2 q方法 名称 说说明 clear ( )清除当前文档 close ( )关闭输 出流并强制显示发送的数据write (“text“)将文本写入文档17Document 对象 3-3 无标题文档function change(color) document.bgColor=color ; 移过来我变色给你看看！变红色|变蓝色|变黄色利用document对象的 bgColor属性改变背景色添加鼠标悬停事件18History对象 4-1 qhistory 对象 q方法 名称 说明 back()加载 His
11、tory 列表中的上一个 URL 。 forward()加载 History 列表中的下一个 URL 。 go(“url“ or number)加载 History 列表中的一个 URL， 或要求浏览器移动指定的页面数 。 Back ( ) 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法；19Location对象 4-2 qLocation 对象 q属性 名称 说明 host设置或检索位置或 URL 的主机名和端口号hostname设置或检索位置或 URL 的主机名
12、部分 hrefhref设置或检索完整的 URL 字符串名称说明 assign(“url“)加载 URL 指定的新的 HTML 文档。 reload()重新加载当前页 replace(“url“) 通过加载 URL 指定的文档来替换当前文档q方法 20History 和 Location 对象 4-4 function jump ( ) location.href=document.myform.menu1.value; 请选择要打开的网页onFocus和onBlur 事件.htmlonMouseOver和onMouseOut件 .html根据用户的选择， 修改跳转的网址添加选项改变事件21History 和Location 对象 4-5 22总结 qJavaScript 程序是事件驱动程序 qonFocus获得焦点事件，表示获得鼠标光标， onBlur失去焦点事件，刚好与之相反 q浏览器对象是一个分层次的结构，window是顶层 的根对象 q打开窗口使用window对象的open( )方法 q设置定时器，使用window对象的setTimeout( )方 法 qlocation对象的back( )和forward( )方法等同于前 进、后退按钮23
