e.target与e.currentTarget对比
复制以下代码,即可查看效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css" rel="stylesheet">
#father{
width: 200px;
height: 120px;
padding: 20px;
background-color: #ccc;
}
#son{
width: 100%;
height: 20px;
padding: 30px 0px;
background-color: #000;
color: white;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="father" onmousedown="getEventTrigger(event)">
<p id="son" onmousedown="getEventTrigger(event)">点击查看效果</p>
</div>
</body>
<script type="text/javascript">
var fa = document.getElementById('fa');
var son = document.getElementById('son');
function getEventTrigger(event)
{
x=event.currentTarget;
y=event.target;
alert("currentTarget 指向: " + x.id + ", target指向:" + y.id);
}
</script>
</html>
灰色为父盒子,黑色为子元素
点击子元素,弹出:
事件经过:点击子元素p标签,事件监听对象为p标签,目标元素也是p标签,所以e.target和e.currentTarget都是p标签
由于没有阻止事件冒泡,会在父元素上再次捕捉到事件,这时事件监听对象为父元素,目标是p标签,正如上图所示
由此给出定义
- e.currentTarget指的是注册了监听事件的对象
- e.target指的是触发事件的对象(父元素里的子元素)
======================================= END ========================================
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决