zoukankan      html  css  js  c++  java
  • 关于DOM事件操作

    事件的三要素: 事件源、事件、事件驱动程序

      事件源.: 引发后续事件的html标签

             document.getElementById(“box”)

            document.getElementsByClassName()

            document.getElementsByTagName()

      事件:      js已经定义好了

            

      事件驱动程序: 对样式和html进行操作

            事件源.onclick=function(){

              事件驱动程序(业务逻辑)

            }

    按钮排他例子(选中谁,谁的背景变红,其他按钮恢复成白色)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .active{
                background-color: red;    
            }
        </style>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script>
        var btnarr=document.getElementsByTagName('button');  //获取事件源,得到的是数组
        for(var i=0;i<btnarr.length;i++){              //for循环遍历数组
                btnarr[i].onclick=function(){            //绑定事件  onclick
                    for(j=0;j<btnarr.length;j++){          //先把所有的按钮的类名都去掉,背景都恢复成默认的白色(排他思想第一步)
                        btnarr[j].className=' ';  
                    }
                    this.className='active';            //this指的就是事件源,把事件源的类名编程active,既背景变为红色.
                }
        }
        </script>
    </body>
    </html>

     

  • 相关阅读:
    重新整理 .net core 实践篇————防跨站脚本攻击[四十]
    重新整理 .net core 实践篇————重定向攻击[三十九]
    低数值精度推理和训练
    FinFET与芯片制程
    LLVM Backend技术
    安霸Ambarella CV系列芯片
    3D卷积,代码实现
    TVM darknet yolov3算子优化与量化代码的配置方法
    英特尔 QLC 3D NAND 数据存储
    Graph Representation 图神经网络
  • 原文地址:https://www.cnblogs.com/amber-liu/p/9713524.html
Copyright © 2011-2022 走看看