事件对象：鼠标事件对象，获取浏览器尺寸，鼠标跟随事件，事件委托

最新推荐文章于 2023-03-23 20:10:50 发布

三岁九年

最新推荐文章于 2023-03-23 20:10:50 发布

阅读量176

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/xh0112/article/details/112850272

版权

本文介绍了JavaScript事件对象，包括如何获取元素尺寸、鼠标位置、浏览器窗口尺寸等，并讲解了鼠标跟随事件、事件传播机制（冒泡和捕捉）、事件委托以及如何阻止浏览器默认行为。还特别强调了事件委托在节省资源和处理动态添加节点的优势。

摘要由CSDN通过智能技术生成

事件对象

事件对象

事件对象

事件绑定：元素节点.on+事件类型 = 匿名函数；
事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。

获取事件对象：
在标准浏览器中。
直接在事件处理函数上定义一个形参。
会在事件触发的时候，由浏览器自动传递实参。

IE低版本
window.event
在标准浏览器下也可以使用
兼容写法：var event = event || window.event;

<script>
        window.onload = function(){
    
        var box = document.querySelector(".box");
        box.onclick = function(event){
    
          var event = event || window.event;
          console.log(event);
        }
    }  
</script>
<body>
   <div class="box">
         123
     </div>
</body>

在这里插入图片描述
生成参数

鼠标事件对象
属性：
button：用来表示咱们按下的是哪一个按键
0 左键
1 滚轮
2 右键

    <style>
        .box {
    
            width: 300px;
            height: 300px;
            background-color: cyan;
        }
    </style>
    <script>
        window.onload = function() {
    
            var box = document.querySelector(".box");
            // 鼠标左键0   滑轮1   鼠标右键2
            box.onmousedown = function(event) {
    
                // 兼用
                var event = event || window.event;
                console.log(event.button);
                // window.event是对于低版IE作用的
            }
        }
    </script>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

在这里插入图片描述

获取当前鼠标的位置（原点不同）
clienX 可视窗口的左上角为原点
clienY
pageX 整个页面的左上角为原点
pageY
screenX 电脑屏幕的左上角为原点
screenY
offsetX 以事件触发的元素为原点
offsetY

    <style>
        * {
    
            margin: 0;
            padding: 0;
        }
        
        .box {
    
            width: 300px;
            height: 300px;
            background-color: cyan;
            margin: 100px 100px;
        }
    </style>
    <script>
        window.onload = function() {
    
            var box = document.querySelector(".box");
            box.onclick = function(event) {
    
                // 兼用
                var event = event || window.event;
                // 可视窗口的左上角为原点
                console.log("clientX=" + event.clientX);
                console.log("clientY=" + event.clientY);
                // 整个页面的左上角为原点
                console.log("pageX=" + event.pageX);
                console.log("pageY=" + event.pageY);
                // 电脑屏幕的左上角为原点
                console.log("screenX=" + event.screenX);
                console.log("screenY=" + event.screenY);
                // 以事件元素的左上角为原点，当前元素
                console.log("offsetX=" + event.offsetX);
                console.log("offsetY=" + event.offsetY);
            }
        }
    </script>
</head>