<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
.aaa {
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//JS是以事件驱动为核心的一门语言
//事件3要素：事件源、事件、事件处理(驱动)程序
//1,事件源：引发后续事件的标签
//2,事件：（js定义好的）
//3,事件驱动程序：对样式和html的操作（DOM操作)
//体验事件
//需求：点击盒子 alert("1");
//步骤1：获取事件源
// var arr = document.getElementsByClassName("");
// var arr1 = document.getElementsByName("");
// var div = document.getElementById("");
//步骤2：绑定事件 匿名绑定（事件源.事件 = function(){事件驱动程序} )
//也可以带函数名绑定 div.onclick = fn;不要带括号
//还有行内绑定 <div id = "box",onclick = fn()> 写括号
//3：书写事件驱动程序 也可以操作标签属性和样式
var div = document.getElementById("box");
div.onclick = function (){
// alert("1");
// div.className = "aaa";
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
}
</script>