$ (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

답변:

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(예 : Backbone을 사용하는 경우 자동으로 수행됨) 다른 것을 가리 킵니다. 항상 실제 DOM 요소를 가져올 수 있습니다 event.currentTarget.

— 페트 벨라
소스
이 예제에서 내부 요소를 클릭하고 event.currentTarget을 사용하면 내부 요소 또는 외부 요소를 얻습니까?
— merlinpatt 2016 년
3
currentTarget항상 핸들러가있는 것입니다. 바깥 쪽
— Petr Bela
"이러한 경우"는 '.outer'가 아닌 '.inner'를 의미했고 event.target이 내부 요소를 참조합니까? 귀하의 예에는 실제로 클릭 된 내용이 나와 있지 않지만 편집하기 전에 확인하고 싶었습니다. :)
— Nils Sens
@NilsSens 예, '내부'를 클릭하면 의미합니다. 나는 그것을 분명히 할 것이다.
— Petr Bela
39

this이벤트가 처리되는 DOM 요소 (현재 대상)에 대한 참조입니다. event.target이벤트를 시작한 요소를 나타냅니다. 이 경우에는 같았으며 종종있을 수 있지만 반드시 그런 것은 아닙니다.

jQuery event docs 를 검토하면 요약 할 수 있습니다.

event.currentTarget

이벤트 버블 링 단계 내의 현재 DOM 요소

event.delegateTarget

현재 호출 된 jQuery 이벤트 핸들러가 첨부 된 요소입니다.

event.relatedTarget

이벤트와 관련된 다른 DOM 요소 (있는 경우)

event.target

이벤트를 시작한 DOM 요소

jQuery를 사용하여 원하는 기능을 얻으려면 다음 중 하나를 사용하여 jQuery를 객체에 포장해야합니다 $(this)나 $(evt.target).

이 .attr()메소드는 DOM 요소가 아닌 jQuery 객체에서만 작동합니다. $(evt.target).attr('href')또는 단순히 evt.target.href당신이 원하는 것을 줄 것입니다.

— 엔 브룩스
소스
그것들이 반드시 같은 요소를 가리키는 것은 아닙니다 . Petr의 답변을 참조하십시오.
— kralyk
1
그것을 지적 해 주셔서 감사합니다. 나의 오래된 답변을 다시 읽는 것은 항상 흥미 롭습니다 ...
— nbrooks
8

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"
})
— Natureshop
소스
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와 event.currentTarget에 대해서는 http://api.jquery.com/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

이벤트 핸들러 함수 또는 객체 메소드 내에서 "포함하는 요소"의 특성에 액세스하는 한 가지 방법은 특수 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 객체는 모든 이벤트와 연결됩니다. 웹 페이지에서 마우스 클릭 위치와 같은 "이벤트에 대한"정보를 제공하는 속성이 있습니다.

예를 들면 다음과 같습니다.

<!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
— MMKarami
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.