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>

查看全文

相关阅读:
DDD~大话目录
 基于DDD的.NET开发框架-DDD经典分层
 补习知识：Entity Framework Code First属性映射约定
 一个官翻教程集合：ASP.NET Core 和 EF Core 系列教程
 补知识：EntityFramework Core映射关系详解
 关于this的问题
 promise
js的类型转换
 不要在块内声明一个函数
 let和var

原文地址：https://www.cnblogs.com/amber-liu/p/9713524.html