6Javascript浏览器对象和事件处理

1学习目标了解文档对象模型掌握浏览器对象使用方法掌握常见事件2文档对象模型(DOM)什么是文档对象模型为了方便组织众多的对象,可以将不同的对象进行归类,使之形成一整套类似于树行结构的模型浏览器对象就是具有树行结构模型的对象其结构如下:3Window对象Window对象文档对象模型层次图的最高层就是windows对象窗口对象var窗口对象名=window.open(“网页名”,”窗口名字”,”窗口属性”)常见窗口属性:4Window对象Window对象window.defaultStatus=某变量值设定状态栏所显示信息。其意义是当整个网页都读取完毕之后，状态栏所显示文字。window.status=某变量值设定状态栏所显示信息。但意义和上面的相区别，不再是永久性的状态栏所显示的文字，其值将在网页的读取过程中可以随时改变该属性。window.location=””改变浏览器的链接。window.status等价于self.status表示浏览器本身即当前窗口window对象。5Window对象Window对象的主要方法:open()和close():开,关一个窗口，关闭当前窗口如：window.close()alert(警告话):弹出警告对话框confirm(“提示字符串”):弹出带有OK和cancle按钮的对话框，带返回值prompt(“提示字符串”,”默认值”):弹出带有一个输入文本框的对话框，带返回值6Window对象Window对象的主要方法:window.navigate(“网页地址”)改变当前窗口所链接的网页地址。ID=setTimeout(函数名称，时间间隔)经过一段时间间隔自动执行函数。window.moveTo(x坐标,y坐标)将浏览器窗口的左上角直接移动到某指定位置。window.resizeBy(水平距离,垂直距离)改变当前窗口的大小，包括水平及垂直距离。window.resizeTo(宽度,高度)设定当前窗口的大小。7Window对象Window对象的主要事件:1onLoad当该网页被用户端的浏览器所读取的时候发生的事件。一般放在body卷标中，如下：bodyonload=”functionname()”表示当该网页被用户端的浏览器一旦读取时，就执行该函数程序。2onUnLoad当该网页被用户关闭整个浏览器窗口的时候发生的事件。一般放在body卷标中，如下：bodyonunload=”functionname()”表示当该网页被用户关闭时，就执行该函数程序。另外，还有：onResize事件：当浏览窗口的大小被用户改变时所触发的事件。onMove事件：当用户利用鼠标将窗口移动时所触发的事件。8document对象•document对象anchor对象:由aname=“…”/a标识生成的对象links对象:由ahref=“…”/a标识生成的对象表单对象:由form/form标识间的表单类型所生成的对象,可以使用form[n]形式来表示,也可以使用其名称来表示9document对象的属性document对象的属性10document对象的方法document对象的方法11history对象history.back()回到上一页重新浏览。无参数。history.forword()回到刚才浏览过的网页重新浏览。无参数。history.go()在网页中任意转移。可以带参数，0为当前网页重新读取，1为回到下一页，-1为返回到上一页。12location对象location.reload()当前网页将被浏览器重新读取一次，相当于刷新网页。location.replace(‘新网页名’)当前网页将被链接到新网页。13image对象document.images[index].border表示某图片外围的边界宽度。document.images[index].width表示某图片的宽度。document.images[index].height表示某图片的高度。document.图片名.属性名表示某图片的名称。可以通过该图片的名称对图片进行操作。只可以读取。document.images[index].src表示某图片的读取。通过改变图片的文件名，可以达到动态改变图片的效果。可以修改。14form表单对象form表单对象form表单对象document.forms[]是一个数组，包含了文档中所有的表单（form）。要引用单个表单，可以用document.forms[x]，X为数组的索引值。也可以在form标记中加上name=“...””属性，那么直接用document.表单名”就可以引用form表单对象的属性length返回该表单所含元素的数目form表单对象的方法reset()重置表单。如document.表单名.reset()与按下“重置”按钮是一样的。submit()提交表单。这与按下“提交”按钮是一样的。15表单元素对象(1/6)表单元素对象每一个表单元素都对应一个对象引用一个表单元素对象,可以使用“文档对象.表单对象.按钮名称”按钮名称指在input标记中的“name=”...“”属性的值。引用任意表单元素都可以用这种方法16表单元素对象(2/6)button按钮对象由“inputtype=”button“”指定属性(submit与之相同)name返回/设定用inputname=“...”指定的元素名称。value返回/设定用inputvalue=“...”指定的元素的值(即按钮上显示值)form返回包含本元素的表单对象。Checkbox复选框对象由“inputtype=”checkbox“”指定属性name返回/设定用inputname=“...”指定的元素名称。value返回/设定用inputvalue=“...”指定的元素的值。form返回包含本元素的表单对象。checked返回/设定该复选框对象是否被选中。这是一个布尔值。defaultChecked返回/设定该复选框对象默认是否被选中。这是一个布尔值。17表单元素对象(3/6)password密码输入区对象由“inputtype=”password“”指定属性(text,textarea与之相同)name返回/设定用inputname=“...”指定的元素名称。value返回/设定密码输入区当前的值。defaultValue返回用inputvalue=“...”指定的默认值。form返回包含本元素的表单对象。18例formname=”abc”inputtype=textname=”dd”inputtype=passwordname=”ee”inputtype=buttonname=”ff”value=”ok”/form在第一个文本框里输入的数据可表示为：document.abc.dd.value在第二个密码框里输入的数据可表示为：document.abc.ee.value在按钮上显示的数据可表示为：document.abc.ff.value19表单元素对象(4/6)Radio单选域对象由“inputtype=”radio“”指定。一组Radio对象有共同的名称（name属性），这样的话，document.formName.radioName就成了一个数组。要访问单个Radio对象就要用：document.formName.radioName[x]。属性name返回/设定用inputname=“...”指定的元素名称。value返回/设定用inputvalue=“...”指定的元素的值。form返回包含本元素的表单对象。checked返回/设定该单选域对象是否被选中。这是一个布尔值。defaultChecked返回/设定该对象默认是否被选中。这是个布尔值。20表单元素对象(5/6)Select下拉菜单对象由“select”指定属性name返回/设定用inputname=“...”指定的元素名称。length返回Select对象下选项的数目。selectedIndex返回被选中的选项的下标。这个下标就是在options[]数组中该选项的位置。如果Select对象允许多项选择，则返回第一个被选中的选项的下标。form返回包含本元素的表单对象。21表单元素对象(6/6)options[]option选择项对象option对象由“select”下的“options”指定options[]是一个数组，包含了在同一个Select对象下的option对象单个Option对象的属性text返回/指定Option对象所显示的文本value返回/指定Option对象的值，与optionsvalue=“...”一致。Index返回该Option对象的下标。对此并没有什么好说，因为要指定特定的一个Option对象，都要先知道该对象的下标。这个属性好像没有什么用，用得很少。selected返回/指定该对象是否被选中。通过指定true或者false，可以动态的改变选中项。defaultSelected返回该对象默认是否被选中。true/false22例formname=”ss”selectname=”sel”optionvalue=”sel1”oneoptionvalue=”sel2”two/select/form则读取document.ss.sel.options[0].text等于'one'text：可读写,表示该选项的叙述文字，作用等同在option卷标后的文字。23Javascript的事件事件驱动概述鼠标或热键的动作称为事件鼠标或热键引发的程序的执行动作,称为事件驱动对时间进行处理的程序称为事件处理程序事件驱动鼠标单击事件:onClick当用户单击鼠标按钮时,产生onClick事件如:inputtype=“button”name=“button”value=“请点击”onClick=“alert(‘你确认要继续进行吗?’)”24Javascript的事件改变事件:onChange当在表单中输入文本或者下拉列表框中的元素发生改变时会触发此事件，如:inputtype=“text”name=“username”onChange=“alert(‘确认吗?’)”获得焦点事件:onFocus当对象获得焦点时触发此事件,如选中文本框如:inputtype=“text”name=“username”onFocus=“alert(‘确认要输入吗’)”失去焦点：onBlur()当用户把输入处移出窗口对象上的动作，即把鼠标移到任意一个没有对象的地方，按下鼠标左键功能。刚好与上方法相反动作。适用于：text、textarea、password、select25Javascript的事件选择文字：onSelect()当用户拖动鼠标选择文字的动作。适用于：text、textarea、passwordonMouseOver:鼠标选中事件当鼠标放在对象上时触发此事件如:tdonMouseOver=alert(‘现在选中的是..’)新闻导航/tdonMouseOut:鼠标离开事件当鼠标离开对象时触发此事件inputtype=“text”name=“username”onMouseOut=alert(‘现在鼠标离开了’)26总结了解文档对象模型掌握浏览器对象使用方法掌握常见事件27练习及提问时间