浏览器在时刻监视着用户在页面上的行为，这些行为就是用户事件。
用户做了某个行为，就会触发相应的事件，开发者只需要编写代码，告诉浏览器，当用户触发了某个事件后，去执行相应的代码（开发者编写的代码）
举例： 第一种方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="div1" onclick="fn()">戳我</button> <script> function fn() { alert('滴滴滴') } </script> </body> </html>第二种方法：
<body> <button>戳我</button> <script> var abc=document.querySelector('button') abc.onclick=function(){ alert(('(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤')) } </script> </body>例子解析：
1.获取button元素：document.querySelector(‘button’)
2.为button元素添加click(左键单击)事件
3.匿名函数：事件处理程序 告诉浏览器，当用户左键单击button元素时，让浏览器帮我们执行匿名函数中的代码
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 10px; height: 10px; background-color: lightskyblue; position: absolute; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <script> document.onmousemove = function(){ var odivs = document.getElementsByTagName('div'); for(var i = odivs.length-1; i > 0; i--){ odivs[i].style.left = odivs[i-1].offsetLeft + 'px'; odivs[i].style.top = odivs[i-1].offsetTop + 'px'; } var pos = getPost(); odivs[0].style.left = pos.x + 'px'; odivs[0].style.top = pos.y + 'px'; } function getPost(){ var scollleft = document.documentElement.scrollLeft; var scrollTop = document.documentElement.scrollTop; return {x:event.clientX+scollleft, y:event.clientY+scrollTop}; } </script> </body> </html>效果展示： 结果：跟随鼠标移动，显示鼠标移动轨迹
