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);
    }
  • 相关阅读:
    小程序请求Django后台及路由跳转
    git操作
    github 介绍
    小程序01
    HTML5要点(四)对象全整理
    JavaScript要点(十二) HTML DOM 事件
    JavaScript要点(九)HTML DOM
    JavaScript要点(八) 闭包
    inferred 和 freefrom
    MySql数据库实现分布式的主从结构
  • 原文地址:https://www.cnblogs.com/lal520/p/9934429.html
Copyright © 2011-2022 走看看