$（this）とevent.targetの違いは？

157

私はjQuery を初めて使用し、JavaScriptおよびjQueryのチュートリアルに従って、タブ付きのパネルを作成していました。

   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();
})
javascript-events  this  jquery 
— ラファエルアデル
ソース
7
thisJavaScript DOM要素への参照です。$()DOM要素をjQueryオブジェクトに変換するためにjQueryによって提供される形式です。を使用しevt.targetて要素を参照しているのに対して、$(this)アクセスしているパラメータを使用してオブジェクトを参照しています。
— Ohgodwhy
2
あなたはそうすることができ、$(evt.target)そして（この場合）同様に同じ結果をもたらすことになります。この.attr()メソッドは、要素自体ではなくjQueryオブジェクトによって提供されます
— BLSully '22

回答:

294

そこでの違い$(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：

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

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

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

— ペトルベラ
ソース
この例では、内側の要素をクリックしてevent.currentTargetを使用すると、内側の要素または外側の要素のどちらを取得しますか？
— merlinpatt 2015年
3
currentTarget常にハンドラーがあるものです。外側
— Petr Bela
「そのような場合」とは、「。outer」ではなく「.inner」がクリックされたことを意味し、event.targetは内部要素を参照しますか？あなたの例は実際にクリックされたものを述べていませんが、編集する前に確認したかったのです。:)
— Nils Sens 2017
@NilsSensはい、それはあなたが「内部」をクリックしたときを意味します。それを明確にします。
— Petr Bela
39

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

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

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あなたが望むものをあなたに与えるでしょう。

— Nbrooks
ソース
それらは必ずしも同じ要素への両方の参照ではありません。ペトルの答えを見てください。
— Kralyk 2014年
1
確かに、指摘してくれてありがとう。それはいつも私の古い答えを再読するのが面白いです...
— nbrooks
8

jQueryがthis変数を「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"
})
— ネイチャーショップ
ソース
4

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すべて同じ要素を基準にしています。

第二の場合にしながら、いくつかのラップされた要素にイベントデリゲートがトリガされたとき、event.targetつつ、トリガ要素に参照されるであろうthisとevent.currentTarget、イベントが配信される場合に参照されます。

thisおよびについては、http：//api.jquery.com/event.currenttarget/にevent.currentTargetよるとまったく同じです

— ジャスキー
ソース
3

ここにクロスブラウザの問題があります。

典型的な非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
}
— ビートルートビートルート
ソース
0

イベントハンドラー関数またはオブジェクトメソッド内で、「包含要素」のプロパティにアクセスする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
— MMカラミ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.