$(this) 和 event.target 之间的区别？

小编典典

$(this) 和 event.target 之间的区别？

all

我是 jQuery 新手，并且正在按照 JavaScript 和 jQuery 中的教程制作选项卡式面板：The Missing Manual
，当作者这样做时，第一行是：

   var target = $(this);

但我试着那样做

   var target = evt.target;

我得到了那个错误：

未捕获的类型错误：对象 http://localhost/tabbedPanels/#panel1 没有方法“attr”

当我改evt.target回时$(this)，它就像一个魅力。

$(this)我想知道和有什么区别evt.target？

如果您需要，这是我的代码：

index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Tabbed Panel</title>
        <style>
            body {
               width : 100%;
               height: 100%;
            }

            #wrapper {
                margin : auto;
                width : 800px;                
            }

            #tabsContainer {
                overflow: hidden;
            }

            #tabs {                
                padding:0;
                margin:0;
            }

            #tabs li {
                float : left;
                list-style:none;
            }

            #tabs a {
                text-decoration:none;
                padding : 3px 5px;                
                display : block;                
            }

            #tabs a.active {
                background-color : grey;                
            }            
            #panelsContainer {
                clear: left;
            }            
            #panel1 {
                color : blue;
            }            
            #panel2 {
                color : yellow;
            }
            #panel3 {
                color: green;
            }
            #panel4 {
                color : black;
            }

        </style>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>        
    </head>

    <body>
        <div id="wrapper">
            <div id="tabsContainer">
                <ul id="tabs">
                    <li><a href="#panel1">Panel1</a></li>
                    <li><a href="#panel2">Panel2</a></li>
                    <li><a href="#panel3">Panel3</a></li>
                    <li><a href="#panel4">Panel4</a></li>
                </ul>
            </div>
            <div id="panelsContainer">
                <div id="panel1" class="panel">
                    this is panel1
                </div>
                <div id="panel2" class="panel">
                    this is panel2
                </div>
                <div id="panel3" class="panel">
                    this is panel3
                </div>
                <div id="panel4" class="panel">
                    this is panel4
                </div>                
            </div>
        </div>

    </body>

</html>

script.js :

$(function(){
    $("#tabs a").click(function(evt){
       var target = evt.target,
           targetPanel = target.attr("href");
       $(".panel").hide();
       $("#tabs a.active").removeClass("active");
       target.addClass("active").blur();
       $(targetPanel).fadeIn(300);
       evt.preventDefault();
    });

    $("#tabs a:first").click();
})

阅读 93

2022-08-08

共1个答案

小编典典

和之间有区别，而且相当重要。虽然（或，见下文）始终指代侦听器附加到的 DOM 元素，但实际上是被单击的 DOM
元素。请记住，由于事件冒泡，如果您有$(this)``event.target``this``event.currentTarget``event.target

<div class="outer">
  <div class="inner"></div>
</div>

并将点击监听器附加到外部 div

$('.outer').click( handler );

然后handler当您在外部 div 和内部 div 内部单击时将调用（除非您有其他代码处理内部 div 上的事件并停止传播）。

在此示例中，当您在内部 div 内单击时，然后在handler：

this指.outerDOM 元素（因为这是处理程序附加到的对象）
event.currentTarget也指.outer元素（因为这是处理事件的 当前目标元素）
event.target指代.inner元素（这为您提供了事件起源的元素）

jQuery 包装器$(this)仅将 DOM 元素包装在 jQuery 对象中，因此您可以在其上调用 jQuery
函数。您可以对$(event.target).

另请注意，如果您重新绑定上下文this（例如，如果您使用
Backbone，它会自动完成），它将指向其他内容。您总是可以从event.currentTarget.

2022-08-08