Bom引入

浏览器对象模型

浏览器就是Bom

打开浏览器，通过浏览器可以打开多个标签页（网页窗口）

一个标签页，对应一个window，即Bom对应多个window（Bom包含window）

Dom是window的一个子对象

学习Bom，主要学习window下除了Dom之外的其他子对象以及属性方法

open方法

作用跳转页面（同超链接）

<!--在当前页面跳转-->
<a href="https://www.baidu.com" target="_self">百度</a>
<div class="d1">百度</div>
<!--在新页面跳转-->
<div class="d2">百度</div>
<!--在新页面跳转且只能打开一个新页面-->
<a href="https://www.baidu.com" target="abc">百度</a>
<div class="d3">百度</div>
<script type="text/javascript">d1.onclick = function () {//跳转到指定位置//默认打开新窗口//餐护士2，跳转方式同超链接的target的属性open('https://www.baidu.com')}d2.onclick = function () {//默认值是"_blank"open('https://www.baidu.com" target="_blank')}d3.onclick = function () {open('https://www.baidu.com" target="abc')}
</script>

event 事件对象

<div class="d1">123</div>
<script type="text/javascript">//旧的绑定事件的方式// d1.onclick = function () {//     alert(123);// }//新的绑定事件的方式// d1.addEventListener('click', function () {//     alert(123);// })//addEventListener方法//第一个参数是事件类型（事件）//第二个参数是事件处理函数（匿名函数或者函数名）//注：不是执行函数，不能加小括号function fn1() {alert(123);}d1.addEventListener('click', fn1);//addEventListener可以给事件追加函数d1.addEventListener('click', function () {alert(456);})//onxx的绑定事件的方式可以追加函数吗？//不能追加，后面会覆盖前面的//移除事件d1.removeEventListener('click', fn1);//removeEventListener方法//第一个参数是事件类型（事件）//第二个参数是要移除的函数名//注：能够移除的函数，只能是在绑定时用函数名的方式绑定，如果用匿名函数的方式绑定，则没办法移除//比如本例中，弹框输出456的函数就没办法移除</script>

小结：1.绑定一些简单的事件，后续不会有（追加+移除），事件委托等高级需求，则优先使用onxx的方式绑定

2.使用addEventListener绑定事件时，优先使用方法名的方式绑定

<div id="d5"><div id="d4"><div id="d3"><div id="d2"><div id="d1"></div></div></div></div>
</div>
<script type="text/javascript">//addEventListener的第三个参数d1.addEventListener('click', function () {alert(1)},true);d2.addEventListener('click', function () {alert(2)},true);d3.addEventListener('click', function () {alert(3)},true);d4.addEventListener('click', function () {alert(4)},true);d5.addEventListener('click', function () {alert(5)},true);//冒泡与捕获，就是当同时触发多个元素的同一个事件时，所触发的执行顺序//冒泡：从最内层的元素开始，依次向外层元素执行//捕获：从最外层的元素开始，依次向内层元素执行//默认是冒泡，如果设置为true，则是捕获
</script>

分析：

当挺好四触发多个元素的同一个事件时，就会存在两个阶段

即捕获阶段与冒泡阶段

按照先捕获后冒泡的顺序执行方法

通过addEventListener的第三个参数来控制当前事件处于哪个阶段

然后按照先捕获后冒泡的顺序执行方法

同一个阶段的事件按照阶段的特点来确定顺序

捕获阶段的事件按照由外到内的顺序来执行

冒泡阶段的事件按照由内到外的顺序来执行

事件对象

如何获取事件对象？

注：只有事件触发的函数才有事件对象，普通方法没有事件对象

<div id="d1">123</div>
<script type="text/javascript">d1.onclick=function (e) {//事件触发的方法//event关键字就是事件对象console.log(event);//默认参数就是事件对象console.log(e);}function fn(e){//普通方法内没有事件对象console.log(e);console.log(event)}fn()//undefined//直接调用就是普通方法d1.ondblclick=fn//由事件触发就可以获取事件对象
</script>

<div id="d5"><div id="d4"><div id="d3"><div id="d2"><div id="d1"></div></div></div></div>
</div>
<script type="text/javascript">//事件对象//功能1：停止后续方法，//注：如果停止的是不会阶段的方法，那么冒泡阶段的事件就会全军覆没//功能2：获取最里面的元素//注：获取的是所有触发事件里面的元素中，最里面的元素d1.addEventListener('click', function () {alert(1)},true);d2.addEventListener('click', function () {alert(2)},true);d3.addEventListener('click', function () {alert(3)},true);d4.addEventListener('click', function () {event.stopPropagation();//停止后续方法alert(4)},true);d5.addEventListener('click', function () {alert(5)console.log(event.target)//获取最里面的元素},true);
</script>

事件委托

当具有相同父元素的元素要绑定相同的事件，且触发的方式也相同，则可以考虑事件委托

<ul class="uu"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script !src="">let uu = document.querySelector('.uu');uu.onclick = function (e) {//通过event.target获取到最里面的元素console.log(e.target);//判断点击的最里面元素是不是liif(e.target.nodeName === 'LI'){//点击到li输出内容console.log(e.target.innerHTML);}}
</script>

事件委托，把要触发的方法绑定给父元素

通过event.target来判断子元素是否触发了事件

如果触发了事件，则在事件内通过event.target来代表触发事件的子元素

默认方法

HTML固有方法就是默认方法，比如超链接的跳转功能

通过事件停止默认方法

<a href="https://www.cnblogs.com/xiaohuochai/p/8444357.html">ha</a>
<script src="">let a=document.querySelector('a');a.onclick=function (e) {alert(1);e.preventDefault();//停止默认方法}
</script>

注：需要在触发默认方法的实际那种停止默认方法

window的其他子对象

history浏览记录

<button id="btn1">后退</button>
<button id="btn2">刷新</button>
<button id="btn3">前进</button>
<script !src="">// history.go()方法//go(0)刷新//go(1)前进，跳转到点击后退按钮到当前页面的页面//go(-1)后退document.getElementById("btn1").onclick = function () {history.go(-1);}document.getElementById("btn2").onclick = function () {history.go(0);}document.getElementById("btn3").onclick = function () {history.go(1);}
</script>

location

<button id="btn1">assign</button>
<button id="btn2">reload</button>
<button id="btn3">replace</button>
<script !src="">//hash:路径中的哈希部分（#及后面的部分）//host:主机名+端口号//hostname:主机名//href:完整路径//origin:协议+主机名+端口号//pathname:路径//port:端口号//protocol:协议//search:通过路径明文传递的数据btn1.onclick = function () {//正常跳转location.assign('https://www.baidu.com')}btn2.onclick = function () {//刷新location.reload()}btn3.onclick = function () {//跳转并且清除跳转前页面的记录location.replace('https://www.baidu.com')}
</script>