dom对象中的this和event.target区别

最新推荐文章于 2022-07-12 18:18:58 发布

di4zhibiao

最新推荐文章于 2022-07-12 18:18:58 发布

阅读量613

点赞数 1

分类专栏： CSS Jquery 前端 JavaScript 文章标签： jquery 前端

本文链接：https://blog.csdn.net/di4zhibiao/article/details/72845095

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

Jquery

5 篇文章 0 订阅

订阅专栏

dom对象中的this和event.target区别

1.this是事件冒泡，动态变化。先触发内部事件，由内到外的执行。

<script>
    function testdiv(val){
        console.log(val.id);
    } 
    function testa(val){
        console.log(val.id);
    }
    </script>
    <body>
        <div onclick="testdiv(this)" id="testdiv">
            <a href="#" onclick="testa(this)" id="testa">click me</a>
        </div>
    </body>

运行结果
这里写图片描述

2.event.target代表的是触发事件的dom对象，是静态不变的。

<script>
    function testdiv(){
        console.log(event.target.nodeName);
    } 
    function testa(){
        console.log(event.target.nodeName);
    }
    function testbody(){
        console.log(event.target.nodeName);
    }
    </script>
    <body onclick="testbody()">
        <div onclick="testdiv()" id="testdiv">
            <a href="#" onclick="testa()" id="testa">click me</a>
        </div>
    </body>

运行结果
这里写图片描述
总结：
即便在父元素事件里面，event.target仍然是指具体的子对象，而用this取到的就是父元素。
两者都代表dom对象，如果需要调用jquery的方法可以这样 $(this),$ (event.target)。

di4zhibiao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom对象中的this和event.target区别

dom对象中的this和event.target区别1.this是事件冒泡，动态变化。先触发内部事件，由内到外的执行。<script> function testdiv(val){ console.log(val.id); } function testa(val){ console.log(val.id); } </scri
复制链接

扫一扫