176

我是 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>

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

7 回答 7

331

There is a difference between $(this) and event.target, and quite a significant one. While this (or event.currentTarget, see below) always refers to the DOM element the listener was attached to, event.target is the actual DOM element that was clicked. Remember that due to event bubbling, if you have

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

and attach click listener to the outer div

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

then the handler will be invoked when you click inside the outer div as well as the inner one (unless you have other code that handles the event on the inner div and stops propagation).

In this example, when you click inside the inner div, then in the handler:

  • this refers to the .outer DOM element (because that's the object to which the handler was attached)
  • event.currentTarget also refers to the .outer element (because that's the current target element handling the event)
  • event.target refers to the .inner element (this gives you the element where the event originated)

The jQuery wrapper $(this) only wraps the DOM element in a jQuery object so you can call jQuery functions on it. You can do the same with $(event.target).

Also note that if you rebind the context of this (e.g. if you use Backbone it's done automatically), it will point to something else. You can always get the actual DOM element from event.currentTarget.

于 2014-02-10T00:14:49.187 回答
41

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

您可以通过查看jQuery 事件文档来很好地了解这一点，但总而言之：

事件.currentTarget

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

event.delegateTarget

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

event.relatedTarget

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

事件.目标

启动事件的 DOM 元素。

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

该.attr()方法仅适用于 jQuery 对象，不适用于 DOM 元素。$(evt.target).attr('href')或者干脆evt.target.href给你你想要的。

于 2012-08-22T17:44:12.203 回答
11

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"
})
于 2014-12-03T23:18:28.970 回答
6

http://api.jquery.com/on/状态：

当 jQuery 调用处理程序时，关键字是对传递事件this的元素的引用；对于直接绑定事件 是附加事件的元素，对于委托事件是元素匹配选择器。（请注意，如果事件从后代元素冒泡，则可能不等于。）thisthisthisevent.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则引用到传递事件的位置。

对于thisand ，根据http://api.jquery.com/event.currenttarget/event.currentTarget，它们是完全相同的东西

于 2015-02-12T06:23:32.373 回答
4

这里存在跨浏览器问题。

一个典型的非 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
}
于 2012-08-22T18:14:10.950 回答
1

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

  • 对于全局函数，这表示窗口。

  • 对于对象方法，this 表示对象实例。

  • 在事件处理程序中，这表示接收事件的元素。

例如：

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

该html渲染后的alert窗口内容分别为：

object Window
object HTMLParagraphElement

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

例如：

<!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渲染后的alert窗口内容分别为：

object MouseEvent
X = 982 Y = 329
于 2017-08-24T15:30:34.397 回答
1

' this ' 指的是事件侦听器已附加到的 DOM 对象。' event.target ' 指的是触发事件侦听器的 DOM 对象。一个自然的问题是，为什么事件侦听器会触发其他 DOM 对象。这是因为事件侦听器附加的父对象也触发了子对象。

于 2021-02-03T07:21:16.300 回答