事件对象

• 获取鼠标按下时的 坐标 相对于 1.事件源 2.页面 3.浏览器窗口

// 对应的 样式 和 html
// <style>

//     * {
//         margin: 0;
//         padding: 0;
//     }
//     div {
//         width:500px;
//         height:500px ;
//         background-color: pink;
//         position: fixed;
//     }
//     body{
//         height: 5000px;
//     }
// </style>
//  <div></div>

    //   获取鼠标按下时的 坐标
    //          相对于
    //                 1.事件源
    //                 2.页面
    //                 3.浏览器窗口 
  

         var oDiv = document.querySelector('div')
         oDiv.addEventListener('click',function(e){
           //1.获取相对于 事件源 的鼠标坐标点
           console.log('相对于事件源X轴',e.offsetX)
           console.log('相对于事件源Y轴',e.offsetY)
           console.log('=============================')


           //2.获取相对于页面的鼠标坐标点
           console.log('相对于页面的 X 轴',e.pageX)
           console.log('相对于页面的 Y 轴',e.pageY)
           console.log('=============================')
           

          //3.相对于浏览器的窗口的鼠标坐标点
           console.log('相对于浏览器的 X 轴',e.clientX)
           console.log('相对于浏览器的 Y 轴',e.clientY)
           console.log('=============================')
         })