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

时间：2018-06-25 20:28:41 阅读：142 评论：0 收藏：0 [点我收藏+]

标签：事件流浏览器学习技术分享等等解释 query 9.png image

在学习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>