<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Event对象属性与方法</title> <!-- event;代表事件本身 event.type;代表事件类型；如：click event.target;表示触发事件的源头，通俗理解：点击谁触发了事件，target就是谁 event.currentTarget;表示包含事件的元素；通俗理解：事件绑定在谁身上，currentTarget就是谁 event.preventDefault();阻止默认行为；如阻止a标签的链接跳转 event.stopPropagation();阻止事件冒泡和事件捕获；(翻译propagation：传播/繁殖/蔓延) clientX/clientY;触发事件时鼠标位于浏览器窗口的固定X/Y轴坐标，不受滚动条影响； pageX/pageY;触发事件时鼠标位于浏览器窗口的X/Y轴坐标，受滚动条影响； screenX/screenY;触发事件时鼠标位于屏幕的X/Y轴坐标； --> <style> #div{ width: 100px; height: 60px; border: 1px solid black; } #sec{ width: 400px; height: 1000px; background: yellow; } </style> </head> <body> <div id="div"> 爸爸<br /> <button id="btn">儿子</button> </div> <a id="a" href="https://www.baidu.com/">百度</a><!-- 默认行为：跳转至百度 --> <ul id="ul"> ul <li id="li">li1</li> <li>li2</li> </ul> <section id="sec">sec</section> <script> var div=document.getElementById("div"); var btn=document.getElementById("btn"); //event.target/event.currentTarget //事件句柄的函数参数默认就是event;可以随便命名（如：function(a))，后续调用可以用参数，也可以直接用event div.addEventListener("click",function(){ console.log("叫爸爸") console.log(event.target);//触发事件的源头；即整个button console.log(event.currentTarget);//执行包含事件本身的元素；即整个div }) //event/event.type btn.addEventListener("click",function (){ console.log(event);//事件本身 console.log(event.type);//事件类型 }) //event.preventDefault() var a=document.getElementById("a"); a.addEventListener("click",function (){ event.preventDefault();//阻止了a标签的链接跳转 }) //event.stopPropagation() var ul=document.getElementById("ul"); var li=document.getElementById("li"); ul.addEventListener("click",function (){ alert("ul"); }); li.addEventListener("click",function (){ alert("li"); event.stopPropagation();//添加该属性后，触发li事件后停止冒泡，不会再执行ul的事件 }) //clientX/clientY; pageX/pageY; screenX/screenY; var sec=document.getElementById("sec"); sec.addEventListener("click",function(){ console.log(event.clientY);//触发事件时鼠标的屏幕坐标，不受滚动条影响 console.log(event.pageY);//触发事件时鼠标的浏览器窗口坐标，受滚动条影响 console.log(event.screenY);//触发事件时鼠标的屏幕坐标 }) </script> </body> </html>