第九章：BOM浏览器对象模型-CSDN博客

本文链接：https://blog.csdn.net/a123456zabc/article/details/51019829

1.BOM简介

BOM（Browser Object Model）浏览器对象模型的基本框架如下：

如上图，window对象是顶层对象，它代表了整个浏览器窗口，window对象下面又分别有document、frames、history、loaction、navigator、screen六个对象，由于document对象比较复杂，所以单拿出来构成DOM（document Object Model）文档对象模型。

2.window对象

window对象表示一个浏览器窗口或一个框架，在客户端JavaScript中，window对象时全局对象，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来用，在使用window对象的方法和属性时，可以不用带window，比如window.alert()可以直接写成alert()。

window对象的常用方法如下：

[javascript]view plain copy 
    
 alert()    //显示消息和一个确认按钮的警告框  
 confirm()    //显示消息以及确认按钮和取消按钮的警告框  
 setInterval()    //按照指定的周期（毫秒计）来循环调用函数或表达式  
 clearInterval()    //取消由setInterval设置的定时器  
 setTimeout()    //指定的毫秒数后调用函数或表达式  
 clearTimeout()    //取消由setTimeout设置的定时器  
 moveTo()    //把窗口的左上角移动到一个指定的坐标  
 moveBy()    //可相对窗口的当前坐标把它移动指定像素  
 resizeBy()  //按照指定的像素调整窗口的大小  
 resizeTo()  //把窗口的大小调整到指定的宽度和高度  
 open()  //打开一个新的浏览器窗口或查找一个已经命名的窗口  
 close() //关闭窗口  
 closed  //返回窗口是否已被关闭  
 status  //设置窗口状态栏文本  
 opener  //返回对创建此窗口的窗口的引用  
 onload  //页面加载  
 onunload    //关闭窗口  

3.父窗口和子窗口通信

open方法会返回所打开窗口的引用，而opener返回对创建此窗口的窗口的引用，这样就可以在父窗口和子窗口之间实现通信：

father.html代码：

<html>
	<head>
		<title>父窗口</title>
		<script type="text/javascript">
			var newWindow;
			function test(){
				newWindow=window.open("newWindow.html","_blank");
			}

			function test2(){
				newWindow.document.getElementById("info").value=document.getElementById("info2").value;
			}

		</script>
	</head>
	<body>
		我是父窗口
		<input type="button" value="打开新窗口" οnclick="test()"/>
		<span id="myspan">消息</span>
		<input type="text" id="info2"/>
		<input type="button" value="通知给子窗口" οnclick="test2()"/>
	</body>
</html>

newWindow.html代码：

<html>
	<head>
		<title>子窗口</title>
		<script type="text/javascript">
			function notify(){
				var val=document.getElementById("info").value;
				window.alert(val);
				opener.document.getElementById("myspan").innerText=val;

			}
		</script>
	</head>
	<body>
		我是子窗口
		<input id="info" type="text" value=""/>
		<input type="button" value="通知给父窗口" οnclick="notify()"/>
	</body>
</html>

4.其它对象

history对象包含了客户端访问过的URL信息， location对象包含了客户端当前的URL信息， navigator对象包含了当前浏览器的各种信息， screen对象包含客户机显示屏幕的相关信息，从BOM层次看，它们都是window对象的成员属性，但实际上它们都是是由js runtime engine自动创建的，所以可以认为这些属性就是就是一个个js对象。

5.event对象

event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，事件通常与函数结合使用，从BOM对象层次图看，event对象也是window对象的属性，其实在其他的dom对象中都存在event事件，一种event对象就代表一类事件。

6.获取事件对象

dom会将事件对象通过参数传递给响应函数（事件监听函数），而IE则可以直接通过window.event来获取事件对象：

DOM中获取事件对象：DOM中要求event是传给事件响应函数的第一个参数

oDiv.onclick = function(){
    oEvent = arguments[0];
}
//或者
oDiv.onclick = function(oEvent){
   
}

IE中获取Event对象：window.event

oDiv.onclick = function(){
    oEvent = window.event;
}

7.绑定事件监听

1.像前面一样，直接在某个HTML元素上指定；

2.使用getElementById()获取元素后，再使用addEventListener()来绑定，使用removeEventListener()取消绑定，对应的IE独有的两个方法分别为attachEvent()和detachEvent()：

<html>
	<head>
		<script type="text/javascript">
			var newWindow;
			function test(){
				window.alert("你投了一次票");
				document.getElementById("butOne").removeEventListener("click",test,false);
			}
		</script>
	</head>
	<body>
		<input type="button" value="投票" id="butOne"/>
		<script type="text/javascript">
			document.getElementById("butOne").addEventListener("click",test,false);
		</script>
	</body>
</html>