共计 4712 个字符，预计需要花费 12 分钟才能阅读完成。
一、什么是 BOM
BOM（Browser Object Model）即浏览器对象模型。
BOM 提供了独立于内容 而与浏览器窗口进行交互的对象；
因为 BOM 次要用于治理窗口与窗口之间的通信，因而其外围对象是 window；
BOM 由一系列相干的对象形成，并且每个对象都提供了很多办法与属性；
BOM 不足规范，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最后是 Netscape 浏览器规范的一部分。
二、学习 BOM 学什么
咱们将学到与浏览器窗口交互的一些对象，例如能够挪动、调整浏览器大小的 window 对象，能够用于导航的 location 对象与 history 对象，能够获取浏览器、操作系统与用户屏幕信息的 navigator 与 screen 对象，能够应用 document 作为拜访 HTML 文档的入口，治理框架的 frames 对象等。在这里，只介绍一些 window 对象等的基础知识，其中会有一些 ECMAscript 的常识还会阐明。其余对象 Location、Screen、Navigator、History 不一一具体介绍了。。
三、window 对象
window 对象是 js 中的顶级对象，所有定义在全局作用域中的变量、函数都会变成 window 对象的属性和办法，在调用的时候能够省略 window。
例：关上窗口 window.open(url,target,param);
// url 要关上的地址
//target 新窗口的地位 _blank _self _parent(父框架)
//param 新窗口的一些设置
// 返回值，新窗口的句柄
敞开窗口：window.close();
四、BOM 系统常识（window 对象）
1. 定时器
提早执行 setTimeout([string | function] code, interval);
clearTimeout([number] intervalId);
1 <body>
2 <input type="button" value="closeTimerId" id="btn">
3 <script>
4 var btn = document.getElementById("btn");
5 var timerId = setTimeout(function () {6 alert("23333");
7 }, 3000);
8 btn.onclick = function () { // 在设置的工夫之前（3s 内）点击能够勾销定时器
9 clearTimeout(timerId); 10 } 11 </script>
12 </body> 定时执行 var timerId = setInterval(code, interval);
clearInterval(timerId); // 革除定时器
倒计时案例：
1 <body>
2 <input type="button" value="倒计时开始 10" id="btn" disabled/>
3 <script>
4 var btn = document.getElementById("btn");
5 var num = 10;
6 var timerId = setInterval(function () { 7 num--;
8 btn.value = "到时器开始" + num; 9 if (num == 0) {10 clearInterval(timerId); 11 btn.disabled = false; 12 btn.value = "批准，能够点了"; 13 } 14 },1000); 15 </script>
16 </body>2.offset 系列办法
3.scroll 系列办法
4.client 系列
clientX 和 clientY 获取鼠标在可视区域的地位 clientX = width + padding，clientY = height + padding
clientLeft 边框的宽度，若有滚动条的话，包含滚动条
例：取得页面可视区域的大小
1 function client() {
2 return {
3 clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0;
4 clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0;
5 };
6 }5. 事件参数 e
当事件产生的时候，零碎会主动的给事件处理函数传递一个参数，会提供事件相干的一些数据，事件参数 e 浏览器的兼容性检测: e = e || window.event
6. 取得计算后款式的办法
7. 事件补充
- 注册事件
- 注册事件的性能问题
- 移除事件
- 事件冒泡
- 事件捕捉 事件的三个阶段
- 事件对象的常见属性
DOM 笔记里有提到注册事件和移除事件，这里着重讲事件对象，事件对象的常见属性
7.1 target 和 currentTarget
7.2 事件冒泡
用 addEventListener 注册事件的时候，第三个参数是 false，即是冒泡。
冒泡的益处 – 事件委托
从一个例子中阐明
1 <body>
2 <ul id="ul">
3 <li> 我是第 1 个 li 标签 </li>
4 <li> 我是第 2 个 li 标签 </li>
5 <li> 我是第 3 个 li 标签 </li>
6 <li> 我是第 4 个 li 标签 </li>
7 </ul>
8 <input type="button" value="insertLi" id="btn">
9 <script>
10 var ul = document.getElementById("ul"); 11 var btn = document.getElementById("btn"); 12 // 把原本应该给 li 注册的事件，委托给 ul，只须要给一个元素注册事件
13 // 动态创建的 li，也会执行预期的成果
14 ul.addEventListener("click", test, false); // 注册点击事件
15 btn.onclick = function () { // 点击同样会有 alert
16 var li = document.createElement("li"); 17 li.innerHTML = "我是新插入的 li 标签"; 18 ul.appendChild(li); 19 }; 20 // 函数写在注册事件代码之外，进步性能
21 function test(e) {22 alert(e.target.innerText); 23 } 24 </script>
25 </body>当事件冒泡影响到了其余性能的实现时，须要阻止冒泡
阻止默认行为的执行
看一下阻止跳转到百度的例子：
1 <body>
2 <a href="http://www.baidu.com" id="link"> 百度 </a>
3 <script>
4 var link = document.getElementById("link");
5 link.addEventListener("click", fn, false);
6 function fn(e) {7 e.preventDefault();
8 // 若用 return false; 不起作用，若用 link.onclick = function();return false 能够阻止
9 } 10 </script>
11 </body>7.3 鼠标事件的参数
还有 7.2 中的勾销事件冒泡和阻止默认行为的执行
8. 正则表达式
定义：
正则表达式是对字符串操作的一种逻辑公式，就是用当时定义好的一些特定字符、及这些特定字符的组合，组成一个“规定字符串”，这个“规定字符串”用来表白对字符串的一种过滤逻辑。
规定：
8.1 正则表达式对象 RegExp
1 <body>
2 <a href="http://www.baidu.com" id="link"> 百度 </a>
3 <script>
4 // var regularExpression = new RegExp("\\d"); // 第一种写法
5 var regularExpression = /\d/; // 第二种写法
6 var str = "adfj23dald"; 7 console.log(regularExpression.test(str)); //test 就是匹配办法，后果是 true
8 </script>
9 </body>8.2 正则之匹配
例：验证电子邮箱
// 验证电子邮箱
// abc@sohu.com
// 11111@qq.com
// aaaaa@163.com
// abc@sina.com.cn
var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
var str = "abc@sina.com.cn";
console.log(reg.test(str));8.3 正则之提取
例：找数字
1 var str = "张三: 1000，李四：5000，王五：8000。";
2 var reg = /\d+/g;
3 // 默认状况下，找到第一个匹配的后果就返回，前面加个 g，就是全局找
4 var arr = str.match(reg);
5 console.log(arr);</pre>8.4 正则之替换
例：所有的逗号替换成句号
1 var str = "abc,efg,123,abc,123,a";
2 str = str.replace(/,/g,".");
3 console.log(str);</pre>8.5 正则的分组()
在正则表达式中用 () 把要分到一组的内容括起来，组别离是 RegExp.$1 RegExp.$2 等等
例：替换地位 源字符串 ”5=a, 6=b, 7=c” 要的后果 ”a=5, b=6, c=7″
1 var str = "5=a, 6=b, 7=c";
2 str = str.replace(/(\d+)=(\w+)/g, "$2=$1");
3console.log(str);9. 键盘事件对象
例：在切换鼠标焦点时，用 enter 键代替 tab 键
1 <body>
2 <input type="text"><input type="text"><input id="t1" type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text">
3 <script>
4 var inputs = document.body.getElementsByTagName("input");
5 for(var i = 0, length = inputs.length; i < length ; i++) {6 var input = inputs[i]; 7 // 回车键的 keyCode 是 13
8 if(input.type === "text") {
9 // 按下回车，让下一个文本框取得焦点
10 input.onkeydown = function (e) {11 if(e.keyCode === 13) {12 this.nextElementSibling.focus();//focus() 他触发了 onfocus 事件
13 } 14 } 15 } 16 } 17 </script>
18 </body>补充：js 中的 instanceof 运算符介绍
判断某个变量是不是某种类型的对象
1 var num = 5;
2 var arr = [];
3 console.log(num instanceof Array); //false
4 console.log(arr instanceof Array); //true</pre>
