1.事件的拓展

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div {
 8             width: 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>
猜你喜欢
