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

时间 2019-11-12

原文原文链接

在学习jQuery的事件以前，你们必需要对JS的事件有所了解。看下文javascript

事件的概念

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

什么是事件流

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

一、DOM事件流jquery

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

① 事件捕获阶段；函数

② 处于目标阶段；学习

③ 事件冒泡阶段spa

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

<!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>

当咱们点击这个btn的时候，看看页面都输出了什么：htm

在解释输出结果为何是这样以前，还有几个知识点须要了解一下便可：

一、addEventListener

addEventListener 是DOM2 级事件新增的指定事件处理程序的操做，这个方法接收3个参数：要处理的事件名、做为事件处理程序的函数和一个布尔值。最后这个布尔值参数若是是true，表示在捕获阶段调用事件处理程序；若是是false，表示在冒泡阶段调用事件处理程序。

二、document、documentElement和document.body三者之间的关系：

document表明的是整个html页面；

document.documentElement表明的是<html>标签；

document.body表明的是<body>标签；

接着咱们就来聊聊上面的例子中输出的结果为何是这样：

在标准的“DOM2级事件”中规定，事件流首先是通过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里能够画个图示意一下:

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

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

须要注意的点：因为老版本的浏览器不支持事件捕获，所以在实际开发中须要使用事件冒泡，在由特殊须要时再使用事件捕获

补充知识了解便可：

一、IE中的事件流只支持“事件冒泡”，可是版本到了IE9+之后，实现了“DOM2级事件”，也就是说IE9+之后也能够在捕获阶段对元素进行相应的操做。

二、在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被当作“冒泡阶段”的一部分。而后，“冒泡阶段”发生，事件又传播回文档。

jquery的经常使用事件

jquery经常使用的事件，你们必定要熟记在心