zoukankan      html  css  js  c++  java
  • js中事件流的理解

    事件的概念:

      HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。

      想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

    什么是事件流:

      1,DOM事件流,

        事件流包括三个阶段:

        1,事件捕获阶段。

        2,处于目标阶段。(当前事件阶段)

        3,事件冒泡阶段。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>事件流</title>
    </head>
    
    <body>
        <a href="javascript:;" id="btn">按钮</a>
    </body>
    <script>
    
    
        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>
    
    </html>

    效果:

    理解:

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

      接着在事件冒泡的过程中,时间开始是由具体的元素(a标签)接收,然后逐级向上传播到最顶层的节点。

    需要注意的时在目标阶段div不会被捕获

  • 相关阅读:
    对指定文件生成数字摘要的MD5工具类
    shell脚本学习积累笔记(第一篇)
    java项目打成jar包时引用了第三方jar,此时我们该如何解决呢
    分享关于学习new BufferedWriter()方法时常遇到的一个无厘头的问题
    WebService学习整理(一)——客户端三种调用方式整理
    TZOJ 挑战题库随机训练02
    TZOJ 挑战题库随机训练01
    TZOJ 2943 Running Median(动态中位数)
    TZOJ 3927 Circular Sequence(环形最大子段和)
    TZOJ 3698 GCD depth(数学)
  • 原文地址:https://www.cnblogs.com/yad123/p/11425222.html
Copyright © 2011-2022 走看看