JS事件流

时间：2021-05-07 10:42:52 阅读：45 评论：0 收藏：0 [点我收藏+]

事件流介绍

js操作css称为脚本化的css，js与html交互通过事件完成
事件就是文档或浏览器窗口中发生一些特定的交互瞬间
事件流（事件传播）描述的是从页面中接收事件的顺序

事件流的历史

如果单机了某个按钮，他们认为单机事件不仅仅发生在按钮上，甚至是单机了整个页面
IE和Netscape提出完全相反的事件流
- IE事件流是事件冒泡流
- Netscape事件流是事件捕获流

事件流中的三个阶段

事件的捕获阶段
处于目标阶段
事件冒泡阶段

<div id="box"></div>
    <script>
        var box = document.getElementById("box");
        //true 为事件捕获
        box.addEventListener(‘click‘,function(){
            box.innerHTML += ‘div\n‘;
        },true);
        document.body.addEventListener(‘click‘,function(){
            box.innerHTML += ‘body\n‘;
        },true);
        document.documentElement.addEventListener(‘click‘,function(){
            box.innerHTML += ‘html\n‘;
        },true);
        document.addEventListener(‘click‘,function(){
            box.innerHTML += ‘document\n‘;
        },true);
        window.addEventListener(‘click‘,function(){
            box.innerHTML += ‘window\n‘;
        },true);
        
        //false 为事件冒泡
        box.addEventListener(‘click‘,function(){
            box.innerHTML += ‘div\n‘;
        },false);
        document.body.addEventListener(‘click‘,function(){
            box.innerHTML += ‘body\n‘;
        },false);
        document.documentElement.addEventListener(‘click‘,function(){
            box.innerHTML += ‘html\n‘;
        },false);
        document.addEventListener(‘click‘,function(){
            box.innerHTML += ‘document\n‘;
        },false);
        window.addEventListener(‘click‘,function(){
            box.innerHTML += ‘window\n‘;
        },false);
    </script>

技术分享图片

事件冒泡

事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点（文档）

<style>
        #box{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById("box");
        box.onclick = function(){
            box.innerHTML += `div\n`;
        }
        document.body.onclick = function(){
            box.innerHTML += `body\n`;
        }
        document.documentElement.onclick = function(){
            box.innerHTML += `html\n`;
        }
        document.onclick = function(){
            box.innerHTML += `document\n`;
        }
        window.onclick = function(){
            box.innerHTML += `window\n`;
        }
    </script>

点击box 运行截图

技术分享图片

事件冒泡图解

技术分享图片

注意：

IE9及以上，火狐，谷歌都是冒泡到window上

IE9以下冒泡到document上

事件捕获

由不太具体的节点更早的接收事件，而最具体的节点应该最后接收到事件。

<style>
        #box{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById("box");
        //true 为事件捕获
        //false 为事件冒泡
        box.addEventListener(‘click‘,function(){
            box.innerHTML += ‘div\n‘;
        },true);
        document.body.addEventListener(‘click‘,function(){
            box.innerHTML += ‘body\n‘;
        },true);
        document.documentElement.addEventListener(‘click‘,function(){
            box.innerHTML += ‘html\n‘;
        },true);
        document.addEventListener(‘click‘,function(){
            box.innerHTML += ‘document\n‘;
        },true);
        window.addEventListener(‘click‘,function(){
            box.innerHTML += ‘window\n‘;
        },true);
    </script>

事件捕获运行截图

技术分享图片

JS事件流

原文：https://www.cnblogs.com/ITwj-115/p/14737668.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

JS事件流

事件流介绍

事件流的历史

事件流中的三个阶段

事件冒泡

点击box 运行截图

事件冒泡图解

注意：

事件捕获

事件捕获 运行截图

事件捕获运行截图