JavaScript事件对象

大熊G

发布于 2022-11-14 16:49:54

6740

发布于 2022-11-14 16:49:54

文章被收录于专栏：大熊G的前端分享大熊G的前端分享

theme: channing-cyan

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

什么是事件对象

事件对象其实就是event对象，在我们操作DOM发生事件时，所有的相关信息都会被集中存储在这个event对象中，这个对象中包含了被发生事件的元素，发生事件的类型以及可能与特点事件相关的其他数据，所有浏览器都支持这个event对象，但是ie的访问方式略有不同，我们稍后细说，往下观看。

DOM事件对象

event对象是传给事件处理程序的唯一参数，我们输出一下它看看里面都有什么。

<body>
    <button>点我输出event</button>
</body>
<script>
    let btn = document.querySelector('button');
    btn.onclick = function(event) {
        console.log(event);
    }
</script>

因为太长了这里缩小了一点。大家可以也尝试输出一下看看都有什么。里面挺多东西的，但一般我们用到的就那么几个。

target 表示目标事件

eventPhase 表示事件处理程序阶段，1代表捕获，2代表达到目标，3代表冒泡

type 被触发的事件类型

detail 事件相关的其他信息

currentTarget 当前事件处理程序所在的元素

有时候我们读别人代码的时候别人可能就写了一个e代替event，这样也是可以跑的，我们可以传任何名称，都可以跑，一般我建议写event，因为本来就是这样定义的，还增加可读性。

我们说一下this指向问题

在事件处理程序内部，this对象始终等于currentTarget的值。我们输出一下看看

 let btn = document.querySelector('button');
    btn.onclick = function(event) {
        console.log(event);
        console.log(this);
        console.log(event.currentTarget);
}

注意：event对象值在事件处理执行期间存在，一旦执行完毕后自动销毁。

IE事件对象

前面提到过ie的访问方式不同，在ie中event对象可能是window对象中的一个属性。写一下

btn.onclick = function(){
    let event = window.event;
    console.log(event);
}

这里就是window.event保存着event对象，只做一下了解吧，毕竟都2021年了，IE马上要退出历史舞台了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

dom

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度