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);
//判断点击的最里面元素是不是li
if(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>
