zoukankan      html  css  js  c++  java
  • DOM 事件冒泡

    1.什么是事件冒泡?

      事件冒泡就是从具体到不具体,

      例如:当你给了一个button按钮一个点击事件,再给他的父级相同的事件,就会按照,button,body,document,window,继续向上冒泡。

    2。什么是事件捕获?

      从不具体到具体,跟事件冒泡刚好相反。window document body button 。

      例如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            #box {
                 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
        <script>
            window.onload = function () {
                var oBtn = document.getElementById('btn');
    
                oBtn.setCapture();
                oBtn.onclick = function(){
                    alert('1');
                }
            }
        </script>
    </head>
    <body>
    <input type="button" value="按钮" id="btn">
    </body>
    </html>

    3.Dom事件流包括三个阶段。

      1.>事件捕获阶段

      2.>处于目标阶段

      3.>事件冒泡阶段

    4.事件捕获阶段

      window.addEventListener('click',function(){

      

         },true)

    为true代表事件使用事件捕获模式,false则代表使用事件冒泡

    5.阻止事件冒泡    stopPropagation()

      

          

  • 相关阅读:
    Map集合的四种遍历
    java 请求 google translate
    Linux 内核初级管理
    Linux GRUB
    Linux 系统启动流程
    Linux 任务计划 crontab
    Linux 进程管理工具
    Linux sudo实作
    Linux 进程管理
    Linux 网络配置命令:ip、ss
  • 原文地址:https://www.cnblogs.com/cyj-dz/p/7101280.html
Copyright © 2011-2022 走看看