web-dev-qa-db-ja.com

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

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

   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-eventsthisjquery
132
Rafael Adel

is$(this)とevent.targetには違いがあり、かなり重要です。 this（またはevent.currentTarget、以下を参照）は常にリスナーがアタッチされたDOM要素を参照しますが、event.targetは実際にクリックされたDOM要素です。イベントバブリングのために、あなたが持っている場合

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

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

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

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

この例では、内側のdiv内をクリックしてから、handlerで：

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

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

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

256
Petr Bela

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

jQueryイベントドキュメント を確認することで、このことを十分に理解できますが、要約すると：

event.currentTarget

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

event.delegateTarget

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

event.relatedTarget

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

event.target

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

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

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

36
nbrooks

「on」メソッドを使用してjQueryが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"
})
7
natureshop

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がトリガーされた要素を参照し、thisとevent.currentTargetがイベントの配信先を参照します。

thisとevent.currentTargetの場合、これらは http://api.jquery.com/event.currenttarget/ に従ってまったく同じものです。

4
Jaskey

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

典型的な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
}
3
Beetroot-Beetroot

イベントハンドラー関数またはオブジェクトメソッド内で、「含む要素」のプロパティにアクセスする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
0
MMKarami