Javascript6-Document对象,事件处理

1、JavaScript第第6章章:JavaScript常用常用DHTML对象对象:Document相关对象相关对象,事件处理事件处理本章内容本章内容lJavaScript Document对象对象lJavaScript Screen对象，对象，History对象，对象，Navigator对象对象，Location对象对象lJavaScript 对象事件处理对象事件处理lJavaScript 表单，表单，Cookie，CSSDocument对象对象.l常用字符串属性常用字符串属性名称名称功能说明功能说明title文档标题文档标题, 通过窗口标题栏显示通过窗口标题栏显示URL,location文档的

2、载入链接文档的载入链接referrer链接到该文档的前一文档链接，只读链接到该文档的前一文档链接，只读lastModified文档最后修改日期的字符串，只读文档最后修改日期的字符串，只读bgColor,fgColor文档背景和缺省字体颜色文档背景和缺省字体颜色alinkColor链接按下激活后的颜色链接按下激活后的颜色linkColor未访问过链接的颜色未访问过链接的颜色vlinkColor已经访问过链接的颜色已经访问过链接的颜色.Document对象对象.l程序示范程序示范获取上次修改时间获取上次修改时间标题栏动态修改标题栏动态修改背景颜色调整背景颜色调整document.write(最后修

3、改时间：最后修改时间：+document.lastModified);document.title=欢迎进入欢迎进入JavaScript世界世界;document.bgColor=#EFEFEF; /设置背景为灰色设置背景为灰色document.fgColor=red; /设置字体为红色设置字体为红色. Document对象对象.l常用对象属性常用对象属性名称名称功能说明功能说明forms Form对象数组，存放文档中所有表单对象数组，存放文档中所有表单images Image对象数组，存放文档所有图片对象数组，存放文档所有图片anchors 链接定义数组，存放文档中所有链接链接定义数组，存放

4、文档中所有链接applets 存放文档中存放文档中Java小程序的数组小程序的数组cookie子对象，用于在客户端存储信息子对象，用于在客户端存储信息all 存放文档中所有对象的数组，存放文档中所有对象的数组，IE支持支持.Document对象对象.l数组对象的调用数组对象的调用根据对象索引号，如根据对象索引号，如forms0代表文档中第一个表单代表文档中第一个表单根据对象名称，如根据对象名称，如formsform1代表名称为代表名称为form1的表单的表单直接对象调用，如直接对象调用，如document. form1document.form1.input1.value=(new Date(

5、).toLocalString();一般情况下采用直接对一般情况下采用直接对象调用方式调用表单象调用方式调用表单. Document对象对象.l关键方法关键方法名称名称功能说明功能说明open() 初始化文档对象初始化文档对象close()关闭关闭open()方法打开的文档方法打开的文档(与浏览器有关与浏览器有关)write(str)将文本附加到当前打开的文档将文本附加到当前打开的文档writeln(str)将文本附加到当前打开的文档并加上将文本附加到当前打开的文档并加上一个换行符（在网页中显示为一个空一个换行符（在网页中显示为一个空格）格）.Document对象对象.l程序示范：输出内容到弹

6、出新窗口程序示范：输出内容到弹出新窗口var myWin=window.open(); /打开新窗口打开新窗口myWin.document.open(); /初始化显示文档初始化显示文档myWin.document.write(直接输出；直接输出；);myWin.document.writeln(1.输出后换行输出后换行);myWin.document.writeln(2.输出后换行输出后换行);myWin.document.writeln(3.输出后换行输出后换行);myWin.document.close(); /关闭文档关闭文档如果不指定如果不指定Window对象则代对象则代表直接操作当

7、前窗口的表直接操作当前窗口的Document对象对象.Document对象对象l程序结果：程序结果：writeln输出的换行符在原代输出的换行符在原代码中可以看到码中可以看到Screen对象对象.书写格式书写格式功能说明功能说明screen.width屏幕分辨率的宽度，例如屏幕分辨率的宽度，例如1024*768分辨分辨率下宽度为率下宽度为1024screen.height屏幕分辨率的高度，例如屏幕分辨率的高度，例如1024*768分辨分辨率下宽度为率下宽度为768screen.availWidth屏幕中可用的宽屏幕中可用的宽screen.availHeight屏幕中可用的高屏幕中可用的高scr

8、een.colorDepth屏幕的色彩数屏幕的色彩数l对象介绍对象介绍属于属于window的子对象的子对象常用于获取屏幕的分辨率和色彩常用于获取屏幕的分辨率和色彩. Screen对象对象l应用例子：窗口最大化应用例子：窗口最大化window.moveTo(0,0);window.resizeTo(screen.availWidth,screen.availHeight);采用采用screen对象的分辨率属性和对象的分辨率属性和resizeTo方法来动态确定窗口最大长方法来动态确定窗口最大长度和宽度度和宽度History对象对象.书写格式书写格式功能说明功能说明history.length历史记

9、录数历史记录数history.back()返回上一页返回上一页history.forward()前进一页前进一页history.go(num)前进或后退前进或后退num页，页，num为为0时时表示页面刷新表示页面刷新l对象介绍对象介绍属于属于window的子对象的子对象常用于返回到已经访问过的页面常用于返回到已经访问过的页面. History对象对象l应用例子：网页导航按钮应用例子：网页导航按钮history.back()history.forward()history.go(-1)history.go(1)Navigator对象对象.lNavigator对象对象属于属于window的子对象，

10、只有属性的子对象，只有属性常用于获取客户端浏览器和操作系统信息常用于获取客户端浏览器和操作系统信息常用的属性常用的属性appCodeName浏览器的名称浏览器的名称appVersion浏览器的版本和操作系统名称浏览器的版本和操作系统名称userLanguage用户语系用户语系cookieEnable是否支持是否支持cookie. Navigator对象对象.l获取获取Navigator对象的所有属性对象的所有属性var showtext = Navigator对象属性列表：对象属性列表：n;for (var propname in navigator) showtext += propname

11、 + : + navigatorpropname + n;alert(showtext);. Navigator对象对象lMozilla下运行的结果下运行的结果Location对象对象.lLocation对象对象属于属于window的子对象的子对象常用于获取和改变当前浏览的网址常用于获取和改变当前浏览的网址常用的属性常用的属性href 当前窗口正在浏览的网页地址当前窗口正在浏览的网页地址replace(url)转向到转向到url网页地址网页地址reload()重新载入当前网址，同按下刷新按钮重新载入当前网址，同按下刷新按钮. Location对象对象l获取获取Location对象的所有属性对象

12、的所有属性var showtext = Location对象属性列表：对象属性列表：n;for (var propname in location) showtext += propname + : + locationpropname + n;alert(showtext);对象事件处理对象事件处理.l对象事件概念对象事件概念指指DHTML对象在状态改变、操作鼠标或键盘时触发的动作对象在状态改变、操作鼠标或键盘时触发的动作l对象事件的分类对象事件的分类鼠标事件：针对鼠标单击、双击、移动等动作鼠标事件：针对鼠标单击、双击、移动等动作键盘事件：针对按下键盘产生的动作键盘事件：针对按下键盘产生的动

13、作状态改变事件：在载入文档、退出、获取焦点、失去焦点、提交、状态改变事件：在载入文档、退出、获取焦点、失去焦点、提交、变化等动作时产生的事件变化等动作时产生的事件.对象事件处理对象事件处理.l常见事件分类图常见事件分类图对象事件对象事件onclick单击单击ondblclick双击双击onmousedown鼠标按下鼠标按下onmouseup鼠标弹起鼠标弹起onmouseover鼠标移入鼠标移入onmouseout鼠标移出鼠标移出onkeypress按过键盘按过键盘onkeydown键盘按下键盘按下onkeyup 键盘弹起键盘弹起onload 文档装载完毕文档装载完毕onunload 退出文档退

14、出文档onchange 值发生变化值发生变化onfocus 获得焦点获得焦点onblur 失去焦点失去焦点onresize调整窗口大小调整窗口大小onsubmit表单提交表单提交鼠标事件鼠标事件键盘事件键盘事件状态事件状态事件.对象事件处理对象事件处理.lEvent事件对象事件对象事件触发后将会产生一个事件触发后将会产生一个Event对象对象Event对象记录事件发生时的鼠标位置、键盘按键状态和触发对对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息象等信息.对象事件处理对象事件处理.l主要的属性主要的属性clientX、clientY 事件触发时鼠标光标相对浏览器窗口的坐标事件触发时

15、鼠标光标相对浏览器窗口的坐标screenX、screenY 事件触发时相对客户端屏幕的位置坐标事件触发时相对客户端屏幕的位置坐标offsetX、offsetY 事件触发时相对引发事件标记对象的位置事件触发时相对引发事件标记对象的位置x、y 事件触发时鼠标光标相对父组件的位置坐标事件触发时鼠标光标相对父组件的位置坐标.对象事件处理对象事件处理.l主要的属性主要的属性srcElement 触发该事件的标记对象触发该事件的标记对象button 鼠标按下的键（鼠标按下的键（1左键、左键、2右键、右键、4中键）中键）keyCode 键盘按键的键盘按键的Unicode码码altKey/ctrlKey/sh

16、iftKey 键盘的键盘的alt、ctrl、shift键是否按下键是否按下 （以下专门针对（以下专门针对onmouseover和和onmouseout事件）事件）fromElement 鼠标原来所处标记对象鼠标原来所处标记对象toElement 鼠标现在所处标记对象鼠标现在所处标记对象.对象事件处理对象事件处理.l属性定义中直接处理事件属性定义中直接处理事件定义进入、退出文档和单击定义进入、退出文档和单击按钮事件按钮事件.对象事件处理对象事件处理lIE的冒泡事件处理机制的冒泡事件处理机制DocumentFormInputSelectTextareaonclick=alert(click inp

17、ut)onclick=alert(click form)onclick=alert(click doc)当处于当处于DHTML对象模型底部对象模型底部对象事件发生时会依次激活对象事件发生时会依次激活上面对象定义的同类事件处上面对象定义的同类事件处理理事件定义方式事件定义方式l在定义事件时直接写入在定义事件时直接写入JavaScript脚本脚本事件定义方式事件定义方式l运行结果运行结果用记事本输入程序，以文件名用记事本输入程序，以文件名test1_1.htm保存，用保存，用IE打开该文件打开该文件鼠标单击按钮鼠标单击按钮打开打开google网站网站后弹出后弹出新的新的google站点站点IE窗口

18、窗口表单表单.l表单元素表单元素FormInputSelectTextarea选择一选择一选择二选择二初始内容初始内容type包括包括 text、button、submit、reset、 checkbox、radio、hidden等等.表单表单l表单验证表单验证function check() /检查检查t1输入是否为空输入是否为空if (form1.t1.value!=)form1.submit();elsealert(姓名不能为空，请重新输入姓名不能为空，请重新输入!);form1.t1.focus(); /如果如果t1值为空则自动将焦点设定到值为空则自动将焦点设定到t1输入框输入框 姓名

19、：姓名： Cookie.l介绍介绍Cookie是是Web浏览器用来存储少量数据的存储方式浏览器用来存储少量数据的存储方式Cookie是是Document对象的一个字符串类型属性对象的一个字符串类型属性l主要功能主要功能用来存储用户输入的信息，在下一次输入时自动调出来，例如存用来存储用户输入的信息，在下一次输入时自动调出来，例如存储用户名和口令储用户名和口令用来记录服务器端的少量字符串变量用来记录服务器端的少量字符串变量用来记录用户访问同一网页的次数用来记录用户访问同一网页的次数商务网站购物车功能的实现商务网站购物车功能的实现.Cookie.lCookie的的JavaScript存取方法存取方法

20、通过通过document.cookie直接存取直接存取cookie的属性可以设定终止日期的属性可以设定终止日期(expires)、路径、路径(path)、域、域(domain)、是否安全、是否安全(secure)cookie属性之间需要用分号分开属性之间需要用分号分开var expdate=(new Date(2005-05-01).toUTCString;document.cookie=username=a1;expires=+expdate;document.cookie=“password=asdf;expires=+expdate;alert(document.cookie);expi

21、res必须是必须是UTC国际标准国际标准时间格式字符串时间格式字符串Cookiel程序示范：通用程序示范：通用cookie存取函数存取函数/ 设定设定cookie的函数的函数function SetCookie(name, value,expires,path,domain,secure) /设定编码后的设定编码后的cookie值值var t1= name + = + escape (value);if (expires) t1 +=; expires= + (new Date(expires).toGMTString();if (path) t1 +=; path= + path;if (d

22、omain) t1 +=; domain= + domain;if (secure) t1 +=; secure= + secure;document.cookie=t1;.Cookiel程序示范：通用程序示范：通用cookie存取函数存取函数/通过名称获取通过名称获取cookiefunction GetCookie(name) var arg = name + =;var tempstr=document.cookie;var pos1 = tempstr.indexOf(arg);var pos2 = tempstr.indexOf(;,pos1);if (pos1=-1)return n

23、ull;if (pos2=-1)pos2=tempstr.length;tempstr=tempstr.substring(pos1+arg.length),pos2);return unescape(tempstr);动态样式表动态样式表.lCSS样式表样式表链入外部样式表文件链入外部样式表文件 (Linking to a Style Sheet)先建立外部样式表文件（先建立外部样式表文件（.css），然后使用），然后使用HTML的的link对象对象 定义内部样式块对象定义内部样式块对象 (Embedding a Style Block)可以在可以在HTML文档的文档的和和标记之间插入一个标记之间插入一个.块对象块对