文章目录
前言
本篇文章是继上篇BOM模型的梳理和总结，主要内容是this关键字，location对象，history对象，event（事件）对象。
一、this关键字
this关键字：代表的是一个对象
1.如果把this写在了标签中，那么this关键字就是标签对象
2.在函数中使用时，如果定义属性，那么代表的就是函数对象
1.标签对象：
<script>
function fun(btn0,v){
if(v == "新浪")
btn0.innerHTML = "百度"
else
btn0.innerHTML = "新浪"
}
</script>
<body>
<button onclick="fun(this,this.innerHTML)">新浪</button>
</body>
2.函数对象：
<script>
function fun1(){
this.name = '乔峰' //this代表的是即将创建的函数对象
this.age = 38 ;
console.log(this)
}
var p = new fun1() ; //创建对象
console.log(p);
console.log(p.name,p.age)
</script>
二、Location对象（Window对象的一部分）
1.Location对象属性
1.内容：
| 属性 | 具体描述 |
|---|---|
| host | 返回一个url主机名和端口 |
| hostname | 返回URL主机名 |
| pathname | 返回的URL路径名 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
2.代码如下：（示例）
<script type="text/javascript">
function fun(){
var host = location.host ;
var hostname = location.hostname
var path = location.pathname
var port = location.port
var proto = location.protocol
var search = location.search
console.log("host:",host)
console.log("hostname:",hostname)
console.log("path:" ,path)
console.log("port:",port)
console.log("protocol:" ,proto)
console.log("search:",search)
}
</script>
<body>
<button onclick="fun()">location对象的属性</button>
</body>
2.Location对象方法（摘抄Location对象菜鸟教程）
1.内容
| 方法 | 具体描述 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前的文档（刷新页面） |
| replace() | 用新的文档替换当前文档 |
注意：
1.window.location.assign(url):加载URL指定的新的HTML文档。就相当于一个链接，跳转到链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
2.window.location.replace(url):通过加载URL指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以没有后退返回上一级。
2.代码如下：(reload方法)
<script type="text/javascript">
/*
Location对象是一个定位对象，作用就是定位到新的页面
*/
function fun(){
window.location.reload() ;
}
document.write(Math.random())
</script>
<body>
<button onclick="fun()">刷新页面</button>
</body>
三、History对象
1.History对象方法
1.内容：
| 方法 | 具体描述 |
|---|---|
| back() | j加载history列表中的前一个URL |
| go(url/number) | 加载history列表中的某个具体页面 |
| forward() | 加载history列表中的下一个URL |
补充(重要)：go(number)要访问的URL在History的URL列表中的相对位置.
-1代表前一个(forward)，0代表当前，1代表(back)后一个。
1(向后) <----- 0(当前) -----> -1(向前)
history.go(-1) == history.forward()
history.go(1) == history.back()
history.current, history.next
2.代码如下：
<script type="text/javascript">
function fun(){
history.forward() ;
}
function fun1(){
history.back() ;
}
function fun2(){
history.go(2) ; //前进2页
}
</script>
<body>
aaaaaaaaaaaaaaaaaaaaaaeeerreregsthare<br>
<button onclick="fun()">前进</button>
<button onclick="fun1()">后退</button>
<button onclick="fun2()">直接去d.html页面</button>
<a href = "history/b.html">b.html</a>
</body>
四、event对象
简介：
1.Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
2.什么时候会产生Event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.事件通常与函数结合使用，函数不会在事件发生前被执行！
1.event对象的常用属性(部分)
1.内容：
| 属性 | 具体描述 |
|---|---|
| button | 返回当事件被触发时，哪个鼠标按钮被点击 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标 |
2.event对象的方法
stopPropagation() ：阻止事件传播
3.event对象的事件流
1.内容：
（1） 事件流：是指父子级关系的元素间进行的事件传播，默认事件冒泡
（2）事件的传递方式：
1> 事件冒泡：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了）；【从下到上/从子级元素到父级元素】
2> 事件捕获：捕获型事件传播，从上向下触发事件，先父级元素触发事件，再子级元素触发事件；
（3）事件监听：事件的监听通过addEventLinstener()方法添加,事件的监听却可以把同一个事件绑定多个函数，依次执行。
函数原型：addEventListener(event, function, useCapture)，重点是第三个参数，这个参数设置了事件的传递类型，默认值为 false, 即冒泡传递，当值为true 时, 事件使用捕获传递
2.代码如下： （只展示了javascript部分）
<script type="text/javascript">
let d1 = document.getElementById("d1") ;
let d = document.getElementById("d") ;
d1.addEventListener("click",function(){
console.log("111111111")
},true) ; //如果此处为false，则为事件冒泡
d.addEventListener("click",function(){
console.log("00000000000")
},true) ;
</script>
1871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
