11DOM编程处理事件 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 
 8     <script>
 9         /*
10             事件绑定方式
11                 1 通过元素的属性绑定
12                 2 通过DOM编程动态绑定
13 
14                 注意事项：
15                     1 一个事件可以同时绑定多个函数
16                     2 一个元素可以同时绑定多个事件
17 
18             
19             常见的事件
20                 1 鼠标事件 onclick ondbclick onmouseover onmousemove onmouseleave
21                 2 键盘事件 onkeydown onkeyup
22                 3 表单事件 onfocus onblur onchange onsubmit onreset
23                 4 页面加载事件 onload(页面加载完毕事件)
24             
25             事件的触发
26                 1 行为触发
27                 2 DOM编程触发
28         */
29     </script>
30 
31     <script>
32         window.onload = function (){
33             //为div1绑定单击事件
34             var div1 = document.getElementById("d1")
35             div1.onclick = function (){
36                 div1.style.backgroundColor="pink"
37             }
38 
39             
40             //通过dom获得要操作的元素
41             var btn = document.getElementById("btn1")
42             //绑定一个单击事件
43             btn.onclick = function (){
44                 alert("按钮单击了")
45                 //通过Dom编程触发事件，相当于某些事件发生了
46                 //触发div的单击事件
47                 div1.onclick()
48             }
49         }
50         
51     </script>
52     <style>
53         .div1{
54             width:100px;
55             height:100px;
56             background-color: cornflowerblue;
57         }
58     </style>
59 
60 </head>
61 
62 <body>
63     <div id="d1" class="div1">
64 
65     </div>
66     <button id="btn1">按钮</button>
67 </body>
68 </html>

 

posted @ 2024-03-24 13:55  白茶花约  阅读(27)  评论(0)    收藏  举报