JavaScript事件对象详解-优快云博客

本文深入探讨JavaScript中的事件对象，揭示其在前端开发中的关键作用。通过实例解析，了解事件对象如何用于捕获用户交互信息，以及它在DOM事件处理中的应用。

<!-- 
        事件对象: 
            => 每触发一个事件都会生成事件对象
            => 事件对象 包含对事件的描述信息
                 坐标位置...
            => 获取事件对象
                事件处理函数中定义一个形式e获取，
                要兼容ie浏览器 window.event获取
                兼容写法
                   e = e || window.event
            
                


     -->
</head>
<body>
    <button>按钮</button>

    <script>
        var btnEle = document.querySelector('button')
        btnEle.onclick = function(e){
            e = e || window.event  //兼容写法
            console.log(e);
        }


非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

window.event 是一个由微软IE引入的属性，只有当DOM事件处理程序被调用的时候会被用到。它的值是当前正在处理的事件对象。

获取光标位置
<title>获取光标坐标位置</title>
    <!-- 
        获取光标坐标位置
           事件对象中获取

             offsetX  offsetY   相对自身事件源
	         从光标到事件源的距离

             clientX  clientY   相对浏览器窗口
	         从光标到窗口的距离
	         
             pageX    pageY     相对页面
             clinetX的距离加滚动条的距离
     -->
     <style>
         *{padding: 0;margin: 0;}
         div{
             background-color: cadetblue;
             width: 100px;
             height: 100px;
             margin: 100px;
         }
     </style>
</head>
<body>
    <div></div>

    <script>
        var divEle = document.querySelector('div')
        //divEle:事件源
        //onclick:事件类型 
        // function: 事件处理函数
        divEle.onclick = function(e){
            e = e || window.event  //获取事件对象

            // var x = e.offsetX   //X轴
            // var y = e.offsetY  //Y轴

            var x = e.clientX 
            var y = e.clientY



            console.log('x :',x, 'y :',y);
            console.log('pageX :',e.pageX, 'pageY :',e.pageY);


        }

鼠标事件
<title>鼠标事件</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            background-color: cadetblue;
            color: red;
            font-size: 18px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>前端技术学习</div>

    <script>
        var divEle = document.querySelector('div')
        //给div元素绑定鼠标移入事件mouseover
        divEle.onmouseover = function(){
            divEle.style.color = 'yellow'
        }

        //给div绑定鼠标移出事件mouseout
        divEle.onmouseout = function(){
            divEle.style.color = 'red'
        }

        //在事件处理函数中定义一个形参e,用于接收事件对象Event,
        // 当鼠标移动事件触发时，生成事件对象赋值给形参e
        divEle.onmousemove = function(e){
            e = e || window.event //兼容IE
            console.log('offsetX :',e.offsetX, ' offsetY :',e.offsetY);
        }

    </script>

案例

<style>
        *{padding: 0; margin: 0;}
        div{
            width: 500px;
            height: 500px;
            background-color: teal;
            position: relative;
            top: 20px;
            left: 30px;
        }

        p{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: tomato;
            display: none;
            /* 让当前元素事件pointer不起作用 */
            pointer-events: none;
            使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

我们希望为HTML提供更为精细的控制（而不仅仅是auto和none），以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法，请添加至wiki页面的Use Cases部分，以帮助我们如何针对HTML扩展pointer-events。

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。
        }
    </style>
</head>
<body>
    <div>
        <p>这是提示信息</p>
    </div>

    <script>
        var divEle = document.querySelector('div')
        var pEle = document.querySelector('p')  
        //移入事件
        divEle.onmouseover = function(){
            pEle.style.display = 'block'
        }
        //移出事件隐藏
        divEle.onmouseout = function(){
            pEle.style.display = 'none'
        }

        /*
          小区域随光标移动
            思路：
              1. 给div大区域绑定鼠标移动事件，
              2. 获取光标位置坐标赋值给提示信息小区域

              3. 解决光标闪烁问题
                原因: 光标移入提示信息小区块时，相当于移出了div大区块，这时移出隐藏，
                      小区域隐藏之后，光标落在div区域，相当于移入div大区块，这时移入显示
                
                
            
        */
        divEle.onmousemove = function(e){
            e = e || window.event //事件对象

            


            var x = e.offsetX - pEle.offsetWidth/2
            var y = e.offsetY - pEle.offsetHeight/2

            

            //边界检查
            if (x < 0) {
                x = 0
            }

            if (x > divEle.offsetWidth - pEle.offsetWidth) {
                x = divEle.offsetWidth - pEle.offsetWidth
            }

            if (y < 0) {
                y = 0
            }
            if (y > divEle.offsetHeight - pEle.offsetHeight) {
                y = divEle.offsetHeight - pEle.offsetHeight
            }

            //提示信息方块移动到指定坐标位置
            pEle.style.top = y + 'px'
            pEle.style.left = x + 'px'

        }

文档中拖拽元素
// // 待拖拽的元素
    // const box = document.querySelector('.box')
    // // 在待拖拽的元素上绑定按下鼠标的事件
    // box.onmousedown = function(event) {
    //   // console.log('鼠标按下...')
    //   // 获取光标在事件源元素坐标系中的坐标
    //   const offsetX = event.offsetX, offsetY = event.offsetY

    //   // 在文档中绑定移动鼠标
    //   document.onmousemove = function(evt) {
    //     // console.log('鼠标移动...')
    //     // 获取光标在文档中的坐标
    //     const pageX = evt.pageX, pageY = evt.pageY
    //     // 运算，计算出拖拽元素定位位置
    //     const left = pageX - offsetX, top = pageY - offsetY
    //     // 设置元素的 CSS 样式
    //     box.style.left = left + 'px'
    //     box.style.top = top + 'px'
    //   }
    // }

    // // 在待拖拽的元素上绑定弹起鼠标的事件
    // box.onmouseup = function() {
    //   console.log('鼠标弹起...')
    //   // 取消在文档中绑定的移动鼠标事件
    //   document.onmousemove = null
    // }