DOM —— 事件对象

z_小张同学

已于 2022-07-18 20:21:06 修改

阅读量264

点赞数 1

分类专栏： DOM 文章标签： javascript 前端

于 2022-07-18 20:12:43 首次发布

本文链接：https://blog.csdn.net/z_2532040197/article/details/125858825

版权

DOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

事件对象：

如果给一个元素对象的某事件（如onclick）绑定了一个响应函数（回调函数），当这个事件触发时，浏览器就会调用这个函数。并且浏览器会创建一个对象，用来描述这个发生的事件。

当事件触发时，handler函数内部会传入数据 —— 触发时的信息。

<body>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            cursor: pointer;
        }
    </style>

    <div class="box"></div>

    <script>

        var box = document.querySelector(".box")
        box.addEventListener("click", (e) => {
            console.log(e);
        })
      
    </script>
</body>

其中鼠标事件触发时：

altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
pageX 鼠标点击的 X 坐标；(包含body隐藏的)
pageY 鼠标点击的 Y 坐标；(包含body隐藏的)
clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关

键盘事件触发时:

charCode/keyCode 键码值 key 键码（左 37、上 38、右 39、下 40 、enter 13）

事件中的this指向：

1.行内: 行内绑定时行内的环境对象是btn 函数的调用者是window 无法获取事件对象。

    <button id="btn2" onclick="fn(this)">按钮</button>

    <script>

        var btn2 = document.querySelector("#btn2")
        function fn(e) {
            console.log(e,this);
        }
        
        //此方法有一个兼容性写法
        //  function fn(e) {
        //    e=(e.constructor==PointerEvent&&e)||window.event 
        //   console.log(e,this);
        // }

    </script>

2.元素属性: this指向的是dom元素本身事件对象在参数中。

    <button id="btn2">按钮</button>
    <script>

        var btn2 = document.querySelector("#btn2")
        btn2.onclick = function(e) {
            console.log(e);
            console.log(this);
        }

    </script>

3.addEventListener: this指向的是dom元素本身事件对象在参数中。

    <button id="btn2">按钮</button>
    <script>

        var btn2 = document.querySelector("#btn2")
        btn2.addEventListener("click",function(e) {
            console.log(e,this);
        })

    </script>