事件对象e的e.target

荧惑

已于 2022-09-12 22:44:51 修改

阅读量2.6k

点赞数 2

文章标签： javascript 前端 html

于 2022-09-11 21:23:37 首次发布

本文链接：https://blog.csdn.net/weixin_49602426/article/details/126809206

版权

文章目录

什么是事件对象

事件对象是事件的一系列相关数据的集合，跟事件相关。eg: 鼠标点击里面就包含了鼠标的信息（属性和方法）、键盘按下就包含了键盘事件的信息；
事件对象是系统给我们自动创建的，不需要我们传递参数；
事件对象只有事件（onclick、click等）存在的时候才会存在；
事件对象只是一个形参，我们可以自己命名：event、e、ele等；

形象一点的话：

btn.onclick = function(e){  // 这里的e就是所谓的事件对象
            e.target
        }

什么是e.target

e.target返回的是触发事件的对象（元素）。那么它和 this 又有什么区别呢？

e.target和this的区别

属性	返回值
e.target	返回的是触发事件的对象（元素）
this	返回的是绑定/调用事件的对象（元素）

区分： 比如说一个ul里面有多个的li，点击事件通过 addEventListener 都绑定给ul，那么此时的 this 返回的是 ul ，此时的e.target 返回的就是被点击到的那一个 li。如图：

代码：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var btn = document.querySelector('ul')
        btn.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
        })
    </script>
</body>

一些常用的事件对象的属性和方法

属性 / 方法	描述
e.target	返回的是触发事件的对象（元素）
e.type	返回被绑定了的鼠标行为，eg：移入移出、点击等
e.preventDefault()	阻止默认行为（并不仅仅限于浏览器的默认行为）
e.stopPropagation()	阻止事件冒泡

荧惑

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
事件对象e的e.target

事件对象是事件的一系列相关数据的集合，跟事件相关。eg: 鼠标点击里面就包含了鼠标的信息（属性和方法）、键盘按下就包含了键盘事件的信息；事件对象是系统给我们自动创建的，不需要我们传递参数；事件对象只有事件（onclick、click等）存在的时候才会存在；事件对象只是一个形参，我们可以自己命名：event、e、ele等；btn.onclick = function(e){ // 这里的e就是所谓的事件对象e.target}e.target返回的是触发事件的对象（元素）。那么它和this。
复制链接

扫一扫