zoukankan      html  css  js  c++  java
  • 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>

    上述代码用以下流程图可以解释:

    事件流被分为三个阶段捕获过程(capture)、目标过程(OnEvent)、冒泡过程(popup)

    要捕获事件就要先监听事件是否发生:addeventListner

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

    如:

    window.onload = function(){
    
            var oBtn = document.getElementById('btn');
    
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件捕获阶段');
            }, true);
            oBtn.addEventListener('click',function(){
                console.log('btn处于事件冒泡阶段');
            }, false);
    }
  • 相关阅读:
    Java代码:response压缩响应
    SpringBoot框架:第一章:基础配置和介绍
    asp.net 发送email
    .NET环境下水晶报表使用总结
    ASP.net(c#)生成条形码
    表格操作类(添加,删除,排序,上移,下移)
    NET email
    C#如何打印条形码EAN13码
    在asp.net中备份还原SQL Server数据库
    配置SQL2000数据库发送邮件
  • 原文地址:https://www.cnblogs.com/lal520/p/9934429.html
Copyright © 2011-2022 走看看