DOM事件对象
DOM事件对象
div.onclick = function(event){.......}
小括号中的event就是事件对象
（1）事件对象是系统给我们自动创建的，我们只需要在小括号中声明一下就可以了，并且可以自主命名，如event，evt，e都可以
（2）事件对象是和我们创建的事件相关的一系列数据的集合
比如鼠标点击事件中，事件对象包含了鼠标的相关信息，如鼠标的坐标
常见的事件对象的属性以及方法
（1）e.target //返回触发事件的对象
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 <style> 8 .d1{ 9 width: 200px; 10 height: 200px; 11 background-color: thistle; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <button >this</button> 18 </div> 19 20 <script> 21 var btn = document.querySelector("button"); 22 var div = document.querySelector("div"); 23 24 btn.addEventListener("click",function(e){ 25 //e.target 返回触发事件的对象 26 console.log(e.target); 27 28 div.className = "d1"; 29 }) 30 </script> 31 </body> 32 </html>
（2）e.type //返回事件的类型
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 <style> 8 .d1{ 9 width: 200px; 10 height: 200px; 11 background-color: thistle; 12 } 13 </style> 14 </head> 15 <body> 16 <div> 17 <button >this</button> 18 </div> 19 20 <script> 21 var btn = document.querySelector("button"); 22 var div = document.querySelector("div"); 23 24 btn.addEventListener("click",function(e){ 25 //e.type 返回触发事件的类型 26 console.log(e.type); 27 28 div.className = "d1"; 29 }) 30 </script> 31 </body> 32 </html>
（3）e.preventDedault() //阻止默认行为，比如点击链接后不跳转
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 </head> 8 <body> 9 <a href="https://www.baidu.com">百度</a> 10 11 <script> 12 var a = document.querySelector("a"); 13 a.addEventListener("click",function(e){ 14 15 //e.preventDefault(); 阻止默认行为 16 e.preventDefault(); 17 }) 18 </script> 19 </body> 20 </html>
