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 onm ouseover onm ousemove onm ouseleave
21 2 键盘事件 onkeydown onkeyup
22 3 表单事件 onfocus onblur onchange onsubmit onreset
23 4 页面加载事件 onl oad(页面加载完毕事件)
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>
标签：编程,单击,绑定,处理事件,11DOM,事件,onclick,div1 From： https://www.cnblogs.com/IrVolcano/p/18092355