zoukankan      html  css  js  c++  java
  • 事件冒泡和捕获

    事件冒泡:有同一父元素 点击子元素 由内向外触发

    事件捕获:有同一父元素,点击子元素,由外向内触发

    使用场景:ul下的li  给ul绑定事件对li进行触发

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>冒泡和捕获</title>
    
    
        <style type="text/css">
            #parent{
                 300px;
                height: 200px;
                background: yellow;
                margin: 0 auto;
            }
            #child{
                 100px;
                height: 100px;
                background:blue ;
                margin: 0 auto;
            }
    
    
        </style>
    </head>
    <body>
    <div id="parent">
          <div  id="child"></div>
    </div>
    
    
    
    <script type="text/javascript">
         // 冒泡
        document.getElementById("parent").addEventListener("click",function(e){
            alert("parent事件被触发");
        })
        document.getElementById("child").addEventListener("click",function(e){
            alert("child事件被触发")
        })
        //捕获
         document.getElementById("parent").addEventListener("click",function(e){
             alert("parent事件被触发")
         },true)
         document.getElementById("child").addEventListener("click",function(e){
             alert("child事件被触发")
         },true)
    
    
    
    
    
    
    
    
    
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    多线程 介绍
    AE中如何获取曲线的一部分(转)
    friday
    THU
    MON
    SAT
    周三
    TUE
    绝对遗憾!
    monday
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/9303984.html
Copyright © 2011-2022 走看看