jQuery系列（九）：JS的事件流的概念

1、事件概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

（1）什么是事件流

事件流描述的是从页面中接收事件的顺序

a、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>
        window.onload = function () {
            let oBtn = document.getElementById('btn');
            oBtn.addEventListener('click', function () {
                console.log('btn处于事件捕获阶段');
            }, true);
            oBtn.addEventListener('click', function () {
                console.log('btn处于事件冒泡阶段');
            }, false);
            document.addEventListener('click', function () {
                console.log('document处于事件捕获阶段');
            }, true);
            document.addEventListener('click', function () {
                console.log('document处于事件冒泡阶段');
            }, false);
            document.documentElement.addEventListener('click', function () {
                console.log('html处于事件捕获阶段');
            }, true);
            document.documentElement.addEventListener('click', function () {
                console.log('html处于事件冒泡阶段');
            }, false);
            document.body.addEventListener('click', function () {
                console.log('body处于事件捕获阶段');
            }, true);
            document.body.addEventListener('click', function () {
                console.log('body处于事件冒泡阶段');
            }, false);
        };

    </script>
</head>
<body>
<a href="javascript:void(0)" id="btn">按钮</a>
</body>
</html>

执行效果：

解释：事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:

首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。

接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。

2、jQuery中的常用事件

jQuery系列（九）：JS的事件流的概念

猜你喜欢