小编典典

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

all

我是 jQuery 新手,并且正在按照 JavaScript 和 jQuery 中的教程制作选项卡式面板:The Missing Manual
,当作者这样做时,第一行是:

   var target = $(this);

但我试着那样做

   var target = evt.target;

我得到了那个错误:

未捕获的类型错误:对象 http://localhost/tabbedPanels/#panel1 没有方法“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();
})

阅读 89

收藏
2022-08-08

共1个答案

小编典典

之间 有区别,而且相当重要。虽然(或,见下文)始终指代侦听器附加到的 DOM 元素,但实际上是被单击的 DOM
元素。请记住,由于事件冒泡,如果您有$(this)``event.target``this``event.currentTarget``event.target

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

并将点击监听器附加到外部 div

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

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

在此示例中,当您在内部 div 内单击时,然后在handler

  • this.outerDOM 元素(因为这是处理程序附加到的对象)
  • event.currentTarget也指.outer元素(因为这是处理事件的 当前目标元素)
  • event.target指代.inner元素(这为您提供了事件起源的元素)

jQuery 包装器$(this)仅将 DOM 元素包装在 jQuery 对象中,因此您可以在其上调用 jQuery
函数。您可以对$(event.target).

另请注意,如果您重新绑定上下文this(例如,如果您使用
Backbone,它会自动完成),它将指向其他内容。您总是可以从event.currentTarget.

2022-08-08