JS的事件流的概念(重点)

Posted 2020-11-20 虫洞小鳗鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS的事件流的概念(重点)相关的知识，希望对你有一定的参考价值。

09-JS的事件流的概念(重点)

在学习jQuery的事件之前，大家必须要对JS的事件有所了解。看下文

事件的概念

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

什么是事件流

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

1、DOM事件流

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

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var 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:;" id="btn">按钮</a>
</body>
</html>