this与e.target的区别_this与tagert-优快云博客

本文通过实例对比了JavaScript事件处理程序中的this与e.target的不同之处，指出this受事件冒泡的影响，而e.target始终指向触发事件的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JavaScript事件机制中，this与e.target都是代表DOM节点，但是它们之间存在什么区别呢？
话不多说，先上代码：

<!DOCTYPE html>
<html>
<head>
    <title>E.TARGET测试</title>
</head>

<style type="text/css">
    #father{
        width:100px;
        height:100px;
        background:#000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #son{
        width:50px;
        height:50px;
        background: #fff;

    }
</style>

<body>
<div id="father" onclick="getCurrentTrigger(this);">
    <div id="son" onclick="getCurrentTrigger(this);"></div>
</div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

    var getCurrentTrigger = function(obj) {
        console.log(obj.id);
    }
</script>
</body>
</html>

运行结果如下:
这里写图片描述
由此，我们可以看到，this是会受到事件冒泡影响的，由内向外执行，指向不同的节点。继续上代码：

<body>
<div id="father" onclick="getCurrentTrigger(event);">
    <div id="son" onclick="getCurrentTrigger(evnet);"></div>
</div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

// var getCurrentTrigger = function(obj) {
//      console.log(obj.id);
//  }


    var getCurrentTrigger = function(e) {
        y = e.target;
        console.log('target :'+y.id);
    }

</script>
</body>