web前端—前端三剑客之JS(14)：BOM之location对象、history对象、事件冒泡和事件捕捉

本文介绍了浏览器对象model(BOM)中的location对象，其用途、属性查询和位置操作。此外，深入剖析了history对象的历史记录管理和事件冒泡与捕获机制，以及DOM事件流的触发过程。

参见：https://blog.youkuaiyun.com/JBY2020/article/details/110149966

location对象

BOM对象中最有用的对象之一，它提供了与当前窗口中加载的文档有关的信息，以及一些导航功能。 location 对象很特别，它既是window对象的属性，也是document 对象的属性，即window.location和document.location引用的是同一个对象。

loacation对象基本属性

loacation对象的字符串参数查询

location对象有很多的属性，但访问URL 包含的查询字符串的属性并不方便。尽管location.search 返回从问号到URL 末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。所以可以说是用像下面这样创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象。

loacation对象的位置操作

// 将当前网页的地址跳转到百度 location.href = "http://www.baidu.com";

//假设初始URL 为http://www.wrox.com/WileyCDA/

将URL 修改为"http://www.wrox.com/WileyCDA/#section1"

location.hash = "#section1";

将URL 修改为"http://www.wrox.com/WileyCDA/?q=js"

location.search = "?q=js";

将URL 修改为"http://www.yahoo.com/WileyCDA/"

location.hostname = "www.yahoo.com";

将URL 修改为"http://www.yahoo.com/mydir/"

location.pathname = "mydir";

将URL 修改为"http://www.yahoo.com:8080/WileyCDA/"

location.port = 8080;

每次修改location 的属性（hash 除外），页面都会以新URL 重新加载。

history对象

history对象保存着用户访问网页的历史记录，从窗口被打开时算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的URL(可以想象一下如果允许的话或发生什么事情)。但是可以通过用户访问过的页面列表在不知道实际URL的情况下实现后退和前进。

history.go();

参数：

数字参数，表示后退或前进，正数为前进，负数为后退
字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做，例如：跳转到最近的baidu.com 页面，history.go("baidu.com");

history.back()：模仿浏览器的“后退”按钮

history.forward()：模仿浏览器的“前进”按钮

事件冒泡和事件捕捉

事件冒泡

事件冒泡（event bubbling）：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 300px;height: 300px;background-color: chartreuse;" id="box1">
        <div style="width: 100px;height: 100px;background-color: rgb(0, 255, 255);" id="box2"></div>
    </div>
    <script>
        // 冒泡事件
        var b1 = document.getElementById('box1');
        var b2 = document.getElementById('box2');
        b1.onclick = function () {
            this.style.backgroundColor = 'red';
            console.log('大盒子box1被修改颜色为红色');
        }
        b2.onclick = function (ev) {
            this.style.backgroundColor = 'yellow';
            console.log('小盒子box2被修改颜色为黄色');
            // ev.stopPropagation();   // 阻止事件冒泡的方法
        }
    </script>
</body>
</html>

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。

DOM事件流

DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。以前面简单的HTML 页面为例，单击<div>元素会按照下图所示顺序触发事件。

事件监听

事件监听方法.addEventListrner(event, function(){}, boolean);

参数：

第一个参数是事件的类型 (如 click,mousedown,mouseup,mousemove等等)
第二个参数是事件触发后调用的函数
第三个参数是个布尔值。默认是false（冒泡阶段执行函数）true(捕获阶段产生)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 300px;height: 300px;background-color: chartreuse;" id="box1">
        <div style="width: 100px;height: 100px;background-color: rgb(0, 255, 255);" id="box2"></div>
    </div>
    <script>
        var b1 = document.getElementById('box1');
        var b2 = document.getElementById('box2');

        // 事件监听
        b1.addEventListener('click',function () {
            console.log('事件捕获阶段box1触发的事件');
        },true)
        b2.addEventListener('click',function () {
            console.log('事件捕获阶段box2触发的事件');
        },true)
        b1.addEventListener('click',function () {
            console.log('事件冒泡阶段box1触发的事件');
        },false)
        b1.addEventListener('click',function () {
            console.log('事件冒泡阶段box1触发的事件');
        },false)
    </script>
</body>
</html>