• 技术文章 >web前端 >js教程

    Javascript中事件对象的target和this的区别

    逆旅行人逆旅行人2021-04-15 13:54:52原创101
    在学习事件对象的时候,总是认为targetthis是一样的,直到后来才发现两者的区别还是挺大的,今天就带大家一起来看看。

    1.当触发对象与绑定对象一致时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ul class="list">
            <li class="itm">item1</li>
            <li class="itm">item2</li>
            <li class="itm">item3</li>
            <li class="itm">item4</li>
            <li class="itm">item5</li>
        </ul>
        <script>
            const li=document.querySelector("ul li:nth-of-type(4)");
            console.log(li);
    
            li.addEventListener("click",function(e){
                console.log(e.target);
                console.log(this);
            });
        </script>
    </body>
    
    </html>

    点击item4这个li后,两者返回如下:

    Snipaste_2021-04-09_10-09-08.png

    2.当触发对象与绑定对象不一致时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <ul class="list">
            <li class="itm">item1</li>
            <li class="itm">item2</li>
            <li class="itm">item3</li>
            <li class="itm">item4</li>
            <li class="itm">item5</li>
        </ul>
        <script>
            const ul=document.querySelector("ul");
            console.log(ul);
            ul.addEventListener("click",function(e){
                console.log(e.target);
                console.log(this);
            });
        </script>
    </body>
    
    </html>

    点击item4这个li后,输出如下:

    23323.png

    3.总结:

    推荐:《2021年js面试题及答案(大汇总)

    以上就是Javascript中事件对象的target和this的区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript target this
    上一篇:JS/jQuery如何移除CSS样式 下一篇:分享几种实用的Node.js调试方法,快来收藏吧!!
    第15期线上培训班

    相关文章推荐

    • 如何调试javascript• javascript中怎么使用item方法• 如何在javascript中绘制方块• javascript如何设置只能输入数字• javascript如何实现删除表格

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网