BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] $(this)とevent.targetの違い？

2022-04-21 12:54:47

質問

私はjQueryの初心者で、以下のチュートリアルに沿ってタブパネルを作成していました。 JavaScriptとjQuery: ミッシングマニュアル 最初の行は、著者がこれを行うときです。 

   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();
})

解決方法は？

そこ は との違いです。 $(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 を参照しています。 .outer DOM 要素 (ハンドラがアタッチされたオブジェクトであるため)
  • event.currentTarget も参照します。 .outer 要素です（なぜなら、それは 現在のターゲット 要素がイベントを処理する)
  • event.target を参照しています。 .inner 要素 (これはイベントの発生元となる要素を示します)。

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

のコンテキストを再バインドした場合にも注意が必要です。 this (例えばBackboneを使えば自動的に行われます)、それは他のものを指すことになります。実際の DOM 要素を取得するには、常に event.currentTarget .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します