关于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>