jquery $(this)和www.example.com之间的差异event.target?

bmvo0sr5 于 2023-01-04 发布在 jQuery

关注(0)|答案(7)|浏览(146)

我按照JavaScript和jQuery中的教程制作了选项卡式面板：失踪的手册，当作者这样做的时候，有第一行：

var target = $(this);

但我试着那样做

var target = evt.target;

我得到了一个错误：
未捕获的类型错误：对象http：//localhost/tabbedPanels/#panel1没有方法"属性"
而当我把evt.target改回$(this)时，它的工作就像一个魅力。
我想知道$(this)和evt.target之间的区别是什么？
下面是我的代码，如果你需要它：

- 索引. 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>

- 脚本. 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();
})

jquery

来源：https://stackoverflow.com/questions/12077859/difference-between-this-and-event-target

7条答案

按热度按时间

gkl3eglg1#

$(this)和event.target之间**有 *.一个差别，而且是相当显著的差别。虽然this（或event.currentTarget，见下文）总是引用监听器附加到的DOM元素，但event.target是被单击的实际DOM元素。

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

并将单击侦听器附加到外部div

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

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

this引用.outer DOM元素（因为它是处理程序附加到的对象）
event.currentTarget还引用.outer元素（因为它是处理事件的 current target 元素）
event.target引用.inner元素（这将为您提供事件起源的元素）

jQuery Package 器$(this)只将DOM元素 Package 在jQuery对象中，以便您可以在其上调用jQuery函数，您可以对$(event.target)执行相同的操作。
还要注意的是，如果你重新绑定this的上下文（例如，如果你使用Backbone，它会自动完成），它会指向其他东西。你总是可以从event.currentTarget中获得实际的DOM元素。

赞(0）回复(0）举报 2023-01-04

fjaof16o2#

this是正在处理事件的DOM元素（当前目标）的引用。event.target引用发起事件的元素。在本例中，它们是相同的，并且通常可以是相同的，但它们不一定总是如此。
通过查看jQuery event docs，您可以很好地了解这一点，但总而言之：

- 事件.当前目标**

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

- 事件.委派目标**

附加当前调用的jQuery事件处理程序的元素。

- 事件相关目标**

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

- 事件.目标**

启动事件的DOM元素。
要使用jQuery获得所需的功能，必须使用以下任一方法将其 Package 在jQuery对象中：$(this)或$(evt.target)。
.attr()方法只适用于jQuery对象，不适用于DOM元素。$(evt.target).attr('href')或evt.target.href将提供您想要的结果。

赞(0）回复(0）举报 2023-01-04

gmxoilav3#

jQuery使用“on”方法处理this变量的方式有很大的不同

$("outer DOM element").on('click',"inner DOM element",function(){
  $(this) // refers to the "inner DOM element"
})

如果您将其与以下各项进行比较：

$("outer DOM element").click(function(){
  $(this) // refers to the "outer DOM element"
})

赞(0）回复(0）举报 2023-01-04

ecfdbz9o4#

http://api.jquery.com/on/状态：
当jQuery调用一个处理程序时，this关键字是对元素的引用，事件被传递到该元素;对于直接绑定事件，this是附加事件的元素，对于委托事件，this是匹配选择器的元素。（注意，如果事件从后代元素冒泡，则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>

注意，我使用$ Package dom元素，以便创建jQuery对象，这是我们一直以来的做法。
您会发现，对于第一种情况，this、event.currentTarget、event.target都引用同一个元素。
而在第二种情况下，当触发了某个 Package 元素的事件委托时，event.target将引用触发的元素，而this和event.currentTarget将引用事件传递的位置。
对于this和event.currentTarget，根据http://api.jquery.com/event.currenttarget/，它们完全相同

赞(0）回复(0）举报 2023-01-04

eivgtgni5#

这里有跨浏览器的问题。
典型的非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
}

jQuery规范化了evt，并使目标在事件处理程序中可用为this，因此典型的jQuery事件处理程序如下所示：

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

使用jQuery的规范化evt和POJS目标的混合事件处理程序如下所示：

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

赞(0）回复(0）举报 2023-01-04

htzpubme6#

在事件处理函数或对象方法中，访问"包含元素"属性的一种方法是使用特殊的this关键字。this关键字表示当前正在处理的函数或方法的所有者。因此：

对于全局函数，这表示窗口。
对于对象方法，这表示对象示例。
在事件处理程序中，它表示接收事件的元素。

例如：

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown() {
            alert(this);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown();alert(this);">Hi</p>
    </body>
</html>

渲染此html后的报警窗口内容分别为：

object Window
object HTMLParagraphElement

Event对象与所有事件相关联。它具有提供"关于事件"的信息的属性，例如鼠标在网页中的单击位置。
例如：

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown(event) {
            var theEvent = event ? event : window.event;
            var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
            alert(event);
                    alert(locString);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown(event);">Hi</p>
    </body>
</html>

渲染此html后的报警窗口内容分别为：