<!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>
Event對象屬性與方法
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。