浏览器对象模型中把浏览器 的各个部分都是用了一个对象进行描述,如果我们要
操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作。
top
window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象
1.window对象go top
常用的方法:
open() 打开一个新的窗口。(可设置工具栏、地址栏、窗口的大小等)
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy() 相对于原来的窗口移动指定的x、y值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定 的代码一次。
注意: 使用window对象的任何属性与方法都可以省略window对象不写的。
Window对象的事件:
事件:
注册事件的方式:
方式一: 直接在html元素上注册
1 <body > 2 </body> 3 <script type="text/javascript"> 4 function ready(){ 5 alert("body的元素被加载完毕了.."); 6 } 7 </script>
方式二:可以js代码向找到对应的对象再注册。 推荐使用。
1 var bodyNode = document.getElementById("body"); 2 3 bodyNode.onload = function(){ 4 alert("body的元素被加载完毕"); 5 }
常用的事件:
鼠标点击相关:
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
鼠标移动相关:
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。
焦点相关的:
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。
其他:
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
1 function clickTest(){ 2 alert("单击.."); 3 } 4 5 function dbClick(){ 6 alert("双击.."); 7 } 8 9 10 11 function showTime(){ 12 var timeSpan = document.getElementById("timeSpan"); 13 var date = new Date().toLocaleString(); 14 timeSpan.innerHTML = date.fontcolor("red"); 15 } 16 17 function hideTime(){ 18 var timeSpan = document.getElementById("timeSpan"); 19 timeSpan.innerHTML = ""; 20 } 21 22 23 function showInfo(){ 24 var timeSpan = document.getElementById("userName"); 25 timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green"); 26 } 27 28 function hideInfo(){ 29 var timeSpan = document.getElementById("userName"); 30 timeSpan.innerHTML = ""; 31 } 32 33 function change(){ 34 alert("城市改变了.."); 35 }
2.Location(地址栏)对象go top
href : 设置以及获取地址栏的对象
reload() 刷新当前的页面
3.Screen(屏幕)对象go top
availHeight 获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
1 document.write("获取系统屏幕的工作区域高度:"+screen.availHeight+"<br/>"); 2 document.write("获取系统屏幕的工作区域宽度:"+screen.availWidth+"<br/>"); 3 document.write("获取屏幕的垂直分辨率:"+screen.height+"<br/>"); 4 document.write("获取屏幕的水平分辨率:"+screen.width+"<br/>");