target VS currentTarget

最新推荐文章于 2023-07-07 22:58:47 发布

火柴头9527

最新推荐文章于 2023-07-07 22:58:47 发布

阅读量176

点赞数

分类专栏： Web开发文章标签： target currentTarget

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

target、currentTarget都是2级DOM事件标准定义的属性，在Vue、微信小程序开发中经常使用，它们有什么区别呢？先看一段转载的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>target VS currentTarget</title>
	<style type="text/css" rel="stylesheet">
        #fa{
            width: 100%;  
            height: 170px;  
            padding: 20px 0px;  
            background-color: cadetblue;  
        }
        #son{  
            width: 100%;  
            height: 20px;  
            padding: 30px 0px;  
            background-color: black;  
            color: white;  
            text-align: center;  
            cursor: pointer;  
        }
    </style>
</head>
<body>
<div id="fa" 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>

通过浏览器查看，当点击黑色区域，由于“事件冒泡”，会弹出两个提示框，分别为：

currentTarget 指向： son， target指向：son => 点击的对象id为son，触发了id为son的对象所注册的某个事件
currentTarget 指向： fa， target指向：son => 点击的对象id为son，由于事件冒泡，触发了id为fa的对象所注册的某个事件

当点击军校蓝区域，会弹出一个提示框：

currentTarget 指向： fa， target指向：fa => 点击的对象id为fa，触发了id为fa的对象所注册的某个事件

火柴头9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
target VS currentTarget

target、currentTarget都是2级DOM事件标准定义的属性，在Vue、微信小程序开发中经常使用，它们有什么区别呢？先看一段转载的代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;target VS current
复制链接

扫一扫

专栏目录