176

私はjQueryを初めて使用し、JavaScriptとjQueryのチュートリアルに従ってタブ付きパネルを作成していました：The Missing Manual、作成者がこれを行うときの最初の行があります：

   var target = $(this);

しかし、私はそれをそのようにしようとしました

   var target = evt.target;

そして私はそのエラーを受け取りました：

Uncaught TypeError：オブジェクト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();
})
4

7 に答える 7

331

との間には違いが$(this)ありevent.target、かなり重要なものです。this（または、以下をevent.currentTarget参照）は、常にリスナーが接続されているDOM要素を指しますevent.targetが、クリックされた実際のDOM要素です。イベントのバブリングが原因で、

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

クリックリスナーを外側のdivにアタッチします

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

次に、handler外側のdivと内側のdivの内側をクリックすると、が呼び出されます（内側のdivでイベントを処理し、伝播を停止する他のコードがない場合）。

この例では、内側のdivの内側をクリックすると、次のようになりますhandler。

  • thisDOM要素を参照し.outerます（ハンドラーがアタッチされたオブジェクトであるため）
  • event.currentTarget要素も参照し.outerます（これは、イベントを処理する現在のターゲット要素であるため）
  • event.target要素を参照し.innerます（これにより、イベントが発生した要素が得られます）

jQueryラッパー$(this)はDOM要素をjQueryオブジェクトにラップするだけなので、jQuery関数を呼び出すことができます。で同じことができます$(event.target)。

また、のコンテキストを再バインドするとthis（たとえば、Backboneを使用する場合は自動的に実行されます）、別の何かを指すことに注意してください。実際のDOM要素はいつでもから取得できますevent.currentTarget。

于 2014-02-10T00:14:49.187 に答える
41

thisイベントが処理されているDOM要素（現在のターゲット）の参照です。event.targetイベントを開始した要素を指します。この場合、それらは同じであり、多くの場合同じである可能性がありますが、必ずしもそうであるとは限りません。

jQueryイベントのドキュメントを確認することで、これをよく理解できますが、要約すると次のようになります。

event.currentTarget

イベントバブリングフェーズ内の現在のDOM要素。

event.delegateTarget

現在呼び出されているjQueryイベントハンドラーがアタッチされた要素。

event.relatedTarget

イベントに関係する他のDOM要素（存在する場合）。

event.target

イベントを開始したDOM要素。

$(this)jQueryを使用して目的の機能を取得するには、：またはを使用してjQueryオブジェクトでラップする必要があります$(evt.target)。

この.attr()メソッドは、DOM要素ではなく、jQueryオブジェクトでのみ機能します。$(evt.target).attr('href')または単にevt.target.hrefあなたが望むものを与えるでしょう。

于 2012-08-22T17:44:12.203 に答える
11

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

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>

$jQueryオブジェクトを作成するためにdom要素をラップするために使用することに注意してください。これは、私たちが常に行う方法です。

this最初のケースではevent.currentTarget、、、event.targetがすべて同じ要素を参照していることがわかります。

2番目のケースでは、ラップされた要素へのイベントデリゲートがトリガーされるとevent.target、トリガーされた要素が参照され、イベントが配信される場所が参照されます。thisevent.currentTarget

thisとについては、 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
}

jQueryevtは正規化して、イベントハンドラーの場合と同様にターゲットを使用できるようthisにするため、一般的なjQueryイベントハンドラーは次のようになります。

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

jQueryの正規化されたPOJSターゲットを使用するハイブリッドイベントハンドラーは、次のevtようになります。

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

イベントハンドラ関数またはオブジェクトメソッド内で、「含む要素」のプロパティにアクセスする1つの方法は、特別な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オブジェクトは、すべてのイベントに関連付けられています。Webページでのマウスクリックの場所など、「イベントに関する」情報を提供するプロパティがあります。

例えば：

<!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
于 2017-08-24T15:30:34.397 に答える
1

' this 'は、イベントリスナーがアタッチされているDOMオブジェクトを指します。' event.target 'は、イベントリスナーがトリガーされたDOMオブジェクトを指します。イベントリスナーが他のDOMオブジェクトをトリガーしている理由として、自然な疑問が生じます。これは、イベントリスナーにアタッチされた親が子オブジェクトに対してもトリガーするためです。

于 2021-02-03T07:21:16.300 に答える