$（this）和event.target之间的区别？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了$（this）和event.target之间的区别？相关的知识，希望对你有一定的参考价值。

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

   var target = $(this);

但我试着这样做

   var target = evt.target;

我得到了那个错误：

Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method '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();
})
答案

$(this)和event.target之间存在差异，而且非常重要。虽然this（或event.currentTarget，见下文）总是引用侦听器所附加的DOM元素，但event.target是被点击的实际DOM元素。请记住，由于事件冒泡，如果你有

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

并将click侦听器附加到外部div

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

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

在这个例子中，当您在内部div中单击时，然后在handler中：

  • this指的是.outer DOM元素（因为这是处理程序附加到的对象）
  • event.currentTarget也指.outer元素（因为那是处理事件的当前目标元素）
  • event.target指的是.inner元素（这为您提供事件发生的元素）

jQuery包装器$(this)只将DOM元素包装在jQuery对象中，因此您可以在其上调用jQuery函数。你可以用$(event.target)做同样的事情。

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

另一答案

this是正在处理事件的DOM元素的引用（当前目标）。 event.target指的是发起事件的元素。在这种情况下它们是相同的，并且通常可以，但它们并不总是如此。

您可以通过查看jQuery event docs来了解这一点，但总结如下：

event.currentTarget

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

event.delegateTarget

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

event.relatedTarget

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

event.target

启动事件的DOM元素。

要使用jQuery获得所需的功能，必须使用以下任一方法将其包装在jQuery对象中：$(this)或$(evt.target)。

.attr()方法仅适用于jQuery对象，而不适用于DOM元素。 $(evt.target).attr('href')或只是evt.target.href会给你你想要的。

另一答案

jQuery如何使用“on”方法处理此变量有很大的不同

$("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"
})
另一答案

这里有跨浏览器问题。

一个典型的非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
}
另一答案

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>

请注意，我使用$来包装dom元素以创建jQuery对象，这是我们一直以来的做法。

您会发现，对于第一种情况，this，event.currentTarget，event.target都引用了相同的元素。

在第二种情况下，当触发某个包装元素的事件委托时，event.target将被引用到触发元素，而this和event.currentTarget被引用到事件的传递位置。

对于this和event.currentTarget，根据http://api.jquery.com/event.currenttarget/，它们完全相同

另一答案

在事件处理函数或对象方法中，访问“包含元素”属性的一种方法是使用特殊的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后的警报窗口内容分别为：

object MouseEvent
X = 982 Y = 329

以上是关于$（this）和event.target之间的区别？的主要内容，如果未能解决你的问题，请参考以下文章

JQuery中this和event.target的区别

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

Event.target、Event.toElement 和 Event.srcElement 有啥区别？

event.target与event.currentTarget的区别

Event对象中的target属性和currentTarget属性的区别

event.target和event.currentTarget的区别