1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 div {
8 100px;
9 height: 100px;
10 background-color: pink;
11 cursor: pointer;
12 }
13 .aaa {
14 background-color: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="box" onclick="fn()"></div>
20
21 <script>
22
23 //体验事件
24 //1.事件源（引发后续事件的标签）
25 //2.事件（js已经定义好，直接使用）
26 //3.事件驱动程序（对样式和html的操作）（DOM操作）
27
28
29 //需求：点击盒子，弹出对话框alert(1)。
30 //步骤：
31 //1.获取事件源（document.getElementById("box")）
32 //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
33 //3.书写事件驱动程序。
34
35
36 //1.获取事件源（document.getElementById("box")）
37 var div = document.getElementById("box");
38 //获取事件源(一共五种)
39 // var arr1 = document.getElementsByTagName("div");
40 // var arr2 = document.getElementsByClassName("leiming");
41 //不掌握
42 // var arr3 = document.getElementsByName("aaa");
43
44
45 //2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）
46 //1.匿名绑定
47 div.onclick = function () {
48 //3.书写事件驱动程序。
49 // alert(1);
50 //可以操作标签的属性和样式。
51 div.className = "aaa";
52 // div.style.width = "200px";
53 // div.style.height = "200px";
54 // div.style.backgroundColor = "red";
55 }
56
57 //不能写写括号，否则成为了返回值（2.用函数名绑定）
58 // div.onclick = fn;
59 //
60 // function fn() {
61 // //3.书写事件驱动程序。
62 // alert(1);
63 // }
64
65 //
66 // //3.行内绑定
67 // function fn(){
68 // alert(1);
69 // }
70
71 </script>
72 </body>
73 </html>