09-JS的时间流的概念

事件的概念

HTML中于JavaScript交互式通过事件驱动来实现的,例如鼠标点击事件,页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听来预定事件.想要知道这些事件事神恶魔时候进行调用的,就需要了解一下: 事件流的概念

什么是事件流

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

　　1,DOM事件流

　　DOM2级事件"规定的事件流包括三个阶段"

　　(1), 事件捕获阶段

　　(2),处于目标阶段

　　(3),事件冒泡阶段

那么其实呢,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>
绑定事件

在解释输出结果为什么是这样之前,还有几个知识点需要了解一下即可:

　　1, addEventListener

addEventListener是DOM2级事件新增的指定事件处理程序的操作,这个方法接受3个参数: 要处理的事件名, 作为事件处理程序的函数二哈一个布尔值.最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序; 如果是false,表示在冒泡阶段调用事件处理程序.

　　2,document, documentElement和document.body三者之间的关系:

　　document代表的是整个html页面;

　　document.documentElement代表的是<html>标签

　　document.body代表的是<body>标签;

接下来说明为什么是这样的输出结果

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

接着在事件冒泡过程中,事件开始时是有最具体的元素(a标签)接受,然后逐级向上爨僰到较为不具体的节点

需要注意的点: 由于老版本的浏览器不支持事件捕获,因此在实际开发中需要使用事件冒泡在有特殊需要时再使用事件捕获

补充知识了解;

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

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

 

jQuery的常用事件

 

posted @ 2018-08-21 16:05  猴里吧唧  阅读(322)  评论(0)    收藏  举报