zoukankan      html  css  js  c++  java
  • HTML DOM-->事件流

    2.事件流的实现

      通过true或false来控制

      举例1:从外向内流:true

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>js_excise</title>    
        </head>
    
        <body>
            <div id="box1" style="background-color: #00FFFF; 70px;height: 70px;">
                <div id="box2" style="background-color: red; 50px;height: 50px;">
                    <div id="box3" style="background-color: yellow; 30px;height: 30px;"></div>
                </div>
            </div>
            <script type="text/javascript">
                var jsBOX1 = document.getElementById('box1')
                var jsBOX2 = document.getElementById('box2')
                var jsBOX3 = document.getElementById('box3')
                jsBOX1.addEventListener('click',function(){
                    console.log("jsBOX1")
                },true)
                jsBOX2.addEventListener('click',function(){
                    console.log("jsBOX2")
                },true)
                jsBOX3.addEventListener('click',function(){
                    console.log("jsBOX3")
                },true)    
            </script>
        </body>
    </html>

      输出:

       举例2:从内向外流:false

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>js_excise</title>    
        </head>
    
        <body>
            <div id="box1" style="background-color: #00FFFF; 70px;height: 70px;">
                <div id="box2" style="background-color: red; 50px;height: 50px;">
                    <div id="box3" style="background-color: yellow; 30px;height: 30px;"></div>
                </div>
            </div>
            <script type="text/javascript">
                var jsBOX1 = document.getElementById('box1')
                var jsBOX2 = document.getElementById('box2')
                var jsBOX3 = document.getElementById('box3')
                jsBOX1.addEventListener('click',function(){
                    console.log("jsBOX1")
                },false)
                jsBOX2.addEventListener('click',function(){
                    console.log("jsBOX2")
                },false)
                jsBOX3.addEventListener('click',function(){
                    console.log("jsBOX3")
                },false)    
            </script>
        </body>
    </html>

      输出:

  • 相关阅读:
    用VS2003调试ASP的方法和体会
    InterDev 调试错误信息: Unable to set server into correct debugging state automatically....的解决办法
    如何在程序里使用代码关闭由MessageBox()弹出的对话框?
    统计数字小程序
    计数程序
    C(读入字符串,转换为int型并做加法操作)
    c数据类型简记
    define使用
    统计数字小程序
    计数程序
  • 原文地址:https://www.cnblogs.com/abner-pan/p/12817621.html
Copyright © 2011-2022 走看看