事件的三要素： 事件源、事件、事件驱动程序。
事件源.: 引发后续事件的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>