JS触发事件event.target VS event.currentTarget实例

更新时间：2023年10月25日 10:52:10 作者：热饭班长

这篇文章主要介绍了JS触发事件event.target VS event.currentTarget实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

定义

event.target为触发事件的元素

event.currentTarget为绑定事件处理函数的元素

事件处理程序绑定在div上

<div onClick="onClick">
    <button>按钮</button>
</div>
// 情况1：点击button
const onClick = (event) => {
    console.log(event.target) // 为button，触发事件的元素
    console.log(event.currentTarget) // 为div，绑定事件处理函数的元素
}
// 情况2：点击div
const onClick = (event) => {
    console.log(event.target) // 为div，触发事件的元素
    console.log(event.currentTarget) // 为div，绑定事件处理函数的元素
}

事件处理程序绑定在button上

<div>
    <button onClick="onClick">按钮</button>
</div>
// 情况1：点击button
const onClick = (event) => {
    console.log(event.target) // 为button，触发事件的元素
    console.log(event.currentTarget) // 为button，绑定事件处理函数的元素
}
// 情况2：点击div，由于div上没有事件处理函数，所以点击不会有任何事情发生

以上就是JS触发事件event.target VS event.currentTarget实例的详细内容，更多关于JS触发事件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

javascript 同时在IE和FireFox获取KeyCode的代码
以前一直在IE8中测试网站，后来写的一部分含有Ajax的代码出现了故障，不得已下载了Firefox以及它的插件Firebug，才发现，FF不支持windows.event事件。于是换了一种思路。
2010-02-02
如何利用原生JS实现图片预览加上传(前后端交互)
在做网站系统时经常会用到图片上传功能,用户往往希望能看到自己上传的图片的样子,下面这篇文章主要给大家介绍了关于如何利用原生JS实现图片预览加上传,需要的朋友可以参考下
2022-01-01
electron实现图片的另存为功能
本文主要介绍了在electron中如何实现图片的另存为操作,包括另存为按钮事件的编写,getImageType和saveAsPicture的主要代码,以及Electron进程与渲染进程的交互效果,希望能为使用electron的开发者提供帮助
2024-10-10
Javascript获取background属性中url的值
Javascript获取CSS中属性值方法有很多，今天工作的时候遇到了一个问题是需要利用Javascript获取css中background-img属性url的值，通过查阅网站的资料找到了解决方法，现在将方法分享给大家，有需要的朋友们们可以参考借鉴，下面来一起看看吧。
2016-10-10
使用JavaScript获取地址栏参数的方法
这篇文章主要介绍了几种使用JavaScript获取地址栏参数的方法以及注意事项，非常的实用，这里推荐给大家
2014-12-12
JavaScript/TypeScript 实现并发请求控制的示例代码
这篇文章主要介绍了JavaScript/TypeScript 实现并发请求控制，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
利用JS hash制作单页Web应用的方法详解
这篇文章主要给大家介绍了关于如何利用JS hash制作单页Web应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-10-10
layer.msg()去掉默认时间,实现手动关闭的方法
今天小编就为大家分享一篇layer.msg()去掉默认时间,实现手动关闭的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
使用console进行性能测试
各大浏览器内置的开发工具，都提供了一个console对象。它主要有两个作用：显示网页代码运行时的错误信息。提供了一个命令行接口，用来与网页代码互动。下面我们就来详细研究下如何使用console进行性能测试。
2015-04-04
JavaScript 加号(+)运算符号
在一些框架中看到了类似这样的写法:+new Date();感觉有些怪,查阅了相关资料和一些网友的帮助.对此用法解释如下,希望对大家有所帮助,不合适的地方请大家指正!
2009-12-12