JavaScript基础 事件处理一 事件处理方式和事件流（事件冒泡和事件捕获）

事件处理是非常重要的内容，事件处理是JS的起点，有事件JS才有触发点，JS才能发挥他的作用。

我们前面都用过click事件，但只是简单的使用一下，事件还有更多细节的东西，笔者将通过几篇文章，试图把JS事件讲清楚。

事件处理的三种方式

方式一：直接在元素中处理(了解)
不推荐，不能写复杂的代码。

<button id="btn" onclick="console.log('clicked')">按钮1</button>
1

方式二：在script中指定对应的函数(推荐)
这种方式是非常常见的。不过有个小问题就是不能有多个监听函数，后面的监听函数会覆盖前面的监听函数。

    <script type='text/javascript'>
        var btn = document.querySelector("#btn")
        function click1() {
            console.log("click1");
        }
        function click2() {
            console.log("click2");
        }
        btn.onclick = click1
        btn.onclick = click2
    </script>
1
2
3
4
5
6
7
8
9
10
11

方式三：通过addEventListener函数添加监听(推荐)
可以同时监听多个函数，并且可以监听不同的事件。

    <script type='text/javascript'>
        var btn = document.querySelector("#btn")
        function click1() {
            console.log("第一个click");
        }
        function click2() {
            console.log("第二个click");
        }
        document.addEventListener("click",click1)
        document.addEventListener("click",click2)
    </script>
1
2
3
4
5
6
7
8
9
10
11

总结：
方式二和方式三都是可以使用的。
方式二在处理只有一个监听函数的时候是完全没问题的，也非常好用。
方式三非常的通用，并且可以处理多个函数的情况。

事件流

有一个div,里面有一个按钮。如果点击按钮，那么div能够接收到点击事件吗？答案是可以的。不光div能接收到，甚至连body和html标签都能接收到点击事件。

可以通过下面的代码进行测试。

    <div id="box">
        div
        <button id="btn">按钮</button>
    </div>
1
2
3
4

        #box{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }
1
2
3
4
5

        btn.addEventListener('click', function () {
            console.log("btn");
        })


        box.addEventListener('click', function () {
            console.log("box");
        })

        body.addEventListener('click', function () {
            console.log("body");
        })

        html.addEventListener('click', function () {
            console.log("html");
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点击按钮会依次输出下面的内容：

这似乎是非常合理的，btn是在最上面的。但仔细一想，其实没这回事，因为根本就没有上下一说。如果btn是在上面的话，那html标签是怎么回事？实际上，浏览器处理的逻辑是按照DOM节点的内外来决定的。
主流的浏览器都是从内到外来处理事件的。也就是下图的冒泡阶段。而有的浏览器使用的是相反的逻辑，也就是下图的捕获阶段。

这是有历史原因的。第四代 Web 浏览器（IE4 和 Netscape Communicator 4）开始开发时，IE 和 Netscape 开发团队几乎同时遇到了处理事件先后顺序的问题。两者提出了几乎完全相反的事件流方案。IE 将支持事件冒泡流，而 Netscape Communicator 将支持事件捕获流。

现在主流默认都是冒泡处理方式，要改成捕获方式也是可以的。 只是比较麻烦，一般不推荐。
在第三个参数加上true就可以了。每个函数都要加上，如果同时存在冒泡和捕获的话，那么是捕获排在前面的，内部按照各种的逻辑排序。不过，一般不要这样做。

        btn.addEventListener('click', function () {
            console.log("btn");
        }, true)


        box.addEventListener('click', function () {
            console.log("box");
        }, true)

        body.addEventListener('click', function () {
            console.log("body");
        }, true)

        html.addEventListener('click', function () {
            console.log("html");
        }, true)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

总结:
推荐使用默认的冒泡方式就可以了。