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

我是 jQuery 的新手，正在制作选项卡式的面板，跟随 JavaScript 和 jQuery: 缺失的手册的教程，当作者这样做的时候，第一行是:

   var target = $(this);

但我试过那样做

   var target = evt.target;

我得到了这个错误:

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

当我把 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>

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();
})
152366 次浏览
小开

this是正在处理事件的 DOM 元素(当前目标)的引用。event.target指的是发起事件的元素。在这种情况下，它们是一样的，而且可能经常是，但它们并不一定总是如此。

通过回顾 JQuery 事件文档，你可以对此有一个很好的了解，但是总的来说:

Event currentTarget

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

活动，授权目标

当前称为 jQuery 的元素 事件处理程序已附加。

相关目标

事件中涉及的其他 DOM 元素(如果有的话)。

活动，目标

发起事件的 DOM 元素。

要使用 jQuery 获得所需的功能，必须使用 $(this)或 $(evt.target)将其封装在 jQuery 对象中。

.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
}

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
}
小开
最佳答案

是在 $(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 元素。

小开

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"
})
小开

Http://api.jquery.com/on/指出:

当 jQuery 调用处理程序时，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
小开

“ 这个”指的是事件侦听器附加到的 DOM 对象。 “ 活动，目标”指的是事件侦听器触发的 DOM 对象。 一个自然而然的问题是，为什么事件侦听器会触发其他 DOM 对象。 这是因为事件侦听器也为子对象附加了父触发器。


提交答案