jQuery 事件流的概念

时间 2019-11-19

标签 jquery 事件概念栏目 JQuery 繁體版

原文原文链接

jQuery 事件流的概念javascript

什么是事件流html

　　DOM事件流java

　　1. 事件捕获阶段;浏览器

　　2.处于目标阶段;函数

　　3.事件冒泡阶段;spa

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

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

　　2,　　document、documentElement和document.body三者之间的关系：对象

document表明的是整个html页面；blog

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

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

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

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

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

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

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

补充知识了解便可：

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

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