Jquery $（this）和event.target之间的差异？_Jquery_This_Jquery Events

Jquery $（this）和event.target之间的差异？

jquery

Jquery $（this）和event.target之间的差异？,jquery,this,jquery-events,Jquery,This,Jquery Events,我是jQuery新手，在制作选项卡式面板时，遵循JavaScript和jQuery:Missing Manual中的教程，当作者这样做时，有第一行： var target = $(this); 但我试着这样做 var target = evt.target; 我犯了一个错误：未捕获类型错误：对象http://localhost/tabbedPanels/#panel1 没有方法“attr” 当我把evt.target改回$（this），它就像一个魔咒我想知道$（这个）和evt

我是jQuery新手，在制作选项卡式面板时，遵循JavaScript和jQuery:Missing Manual中的教程，当作者这样做时，有第一行：

   var target = $(this);

但我试着这样做

   var target = evt.target;

我犯了一个错误：

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

当我把

evt.target

改回

$（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>

$(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();
})

此

是处理事件的DOM元素（当前目标）的引用<代码>事件。目标指启动事件的元素。在这种情况下，它们是相同的，而且常常是相同的，但它们不一定总是相同的

通过查看，您可以很好地了解这一点，但概括起来：

事件。当前目标

事件冒泡中的当前DOM元素阶段

事件。委派目标

当前调用jQuery的已附加事件处理程序

事件。相关目标

事件中涉及的其他DOM元素（如果有）

事件目标

启动事件的DOM元素

要使用jQuery获得所需的功能，必须使用以下两种方法之一将其包装到jQuery对象中：

$（this）

或

$（evt.target）

.attr（）

方法仅适用于jQuery对象，而不适用于DOM元素

$（evt.target）.attr（'href'）

或干脆

evt.target.href

将为您提供所需的内容。

此处存在跨浏览器问题

典型的非jQuery事件处理程序如下所示：

function doSomething(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

function doSomething(evt) {
    var $target = $(this);
    //do stuff here
}

function doSomething(evt) {
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

jQuery规范化了

evt

，并使目标在事件处理程序中作为

this

可用，因此典型的jQuery事件处理程序如下所示：

function doSomething(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

function doSomething(evt) {
    var $target = $(this);
    //do stuff here
}

function doSomething(evt) {
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

使用jQuery标准化的

evt

和POJS目标的混合事件处理程序如下所示：

function doSomething(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

function doSomething(evt) {
    var $target = $(this);
    //do stuff here
}

function doSomething(evt) {
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

在
$（this）
和
event.target
之间有一个差异，这是一个非常重要的差异。虽然
此
（或
事件.currentTarget
，请参见下文）始终引用侦听器附加到的DOM元素，但
事件.目标
是实际单击的DOM元素。记住，由于事件冒泡，如果您有

<div class="outer"> <div class="inner"></div> </div>
然后，当您在外部div和内部div中单击时，将调用
处理程序
（除非您有其他代码处理内部div上的事件并停止传播）
在本例中，当您在内部div中单击时，然后在
处理程序中单击：此引用.outer DOM元素（因为该元素是处理程序附加到的对象） event.currentTarget 也指.outer 元素（因为它是处理事件的当前目标元素） event.target 指的是.internal 元素（这提供了事件发生的元素） jQuery包装器$（this）仅包装jQuery对象中的DOM元素，以便您可以对其调用jQuery函数。您可以对$（event.target）执行相同的操作还请注意，如果您重新绑定此的上下文（例如，如果您使用主干，它将自动完成），它将指向其他内容。您总是可以从事件中获取实际的DOM元素。currentTarget jQuery使用“on”方法处理此变量的方式有很大不同如果您将其与以下内容进行比较：- $("outer DOM element").click(function(){ $(this) // refers to the "outer DOM element" }) 国家：当jQuery调用处理程序时，this关键字是对事件交付地点的元素；对于直接绑定事件此是附加事件和委派事件的元素事件此是一个元素匹配选择器。（请注意，此可能不适用。）如果事件从子体冒泡，则等于event.target 元素。）从元素创建jQuery对象，以便与jQuery方法一起使用时，使用$（this）如果我们有 <input type="button" class="btn" value ="btn1"> <input type="button" class="btn" value ="btn2"> <input type="button" class="btn" value ="btn3"> <div id="outer"> <input type="button" value ="OuterB" id ="OuterB"> <div id="inner"> <input type="button" class="btn" value ="InnerB" id ="InnerB"> </div> </div> 检查以下输出： <script> $(function(){ $(".btn").on("click",function(event){ console.log($(this)); console.log($(event.currentTarget)); console.log($(event.target)); }); $("#outer").on("click",function(event){ console.log($(this)); console.log($(event.currentTarget)); console.log($(event.target)); }) }) </script> $（函数（）{ $（“.btn”）。在（“单击”）上，函数（事件）{ log（$（this））； log（$（event.currentTarget））； log（$（event.target））； }); $（“#外部”）。在（“单击”）上，函数（事件）{ log（$（this））； log（$（event.currentTarget））； log（$（event.target））； }) }) 请注意，我使用$ 包装dom元素以创建jQuery对象，这是我们通常的做法您会发现，对于第一种情况，this ，event.currentTarget ，event.target 都引用了相同的元素而在第二种情况下，当触发某个已包装元素的事件委托时，event.target 将引用已触发元素，而this 和event.currentTarget 将引用事件传递的位置对于this 和event.currentTarget ，根据事件处理函数或对象方法中的，它们是完全相同的，访问“包含元素”属性的一种方法是使用特殊的this关键字。this关键字表示当前正在处理的函数或方法的所有者。因此：为了一个g