阅读 891

JavaScript事件流

这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战

理解事件流

事件流就是页面接收事件的顺序,一般有俩种事件流:事件冒泡和事件捕获,其实它就是发生事件的各种顺序,理解这个之后可以更好的运用事件操作。

事件冒泡

事件冒泡就是从文档最深处的节点向上传播,它从最底层开始触发,然后向上一直到window对象上。我们写个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
</head>
<body>
    <div id="box">
        <p >
            <button>点我出发向上</button>
        </p>
    </div>
</body>
</html>
复制代码

大家看上面非常简单的例子,事件冒泡就是从 button => p => div => body => html

graph TD
button --> p --> div --> body -->html

我用掘金官方提供的流程图简单写了一下,大家可以看到就是这个顺序,非常好理解。

事件捕获

事件捕获的意思就是从外向内的,它是先获取到外层元素,然后通过一层一层的方式访问到最底层的内容。其实它的流程正好是与事件冒泡是相反的。我们可以借助上面的例子再重写画一下。

它获取的方式就是 html => body => div => p => button

graph TD
 html --> body  --> div --> p -->button

因为之前的旧版本不支持,实际当中我们几乎用不到事件捕获,一般都是用事件冒泡来处理操作。

事件流

DOM规范规定了事件流分为三个阶段:事件捕获 => 达到目标元素 => 事件冒泡 ,其中事件捕获是最先发生的,最晚发生的是事件冒泡,如果我们要做一些点击或者其他操作来响应事件,就必须要在事件冒泡前进行相应。

查了一下,DOM2 Events规范明确捕获阶段不会命中事件目标,但是在浏览器中都会在捕获阶段上给目标触发事件,所以我们在操作点击或者其他事件的时候是有俩个机会来操作。

注意 IE8及以前的版本不支持DOM事件流

文章分类
前端
文章标签