2009-11-09 4 views
3

나는이 HTML이 :JQuery와 달러 기호

<ul id="list1" class="eventlist"> 
    <li>plain</li> 
    <li class="special">special <button>I am special</button></li> 
    <li>plain</li> 
</ul> 

을하고 나는이 jQuery 코드가 있습니다

$('#list1 li.special button').click(function(event) { 

    var $newLi = $('<li class="special"><button>I am new</button></li>'); 
    var $tgt = $(event.target); 
}); 

내 질문이

var $tgt = $(event.target); 

사이의 차이점은 무엇입니까
var $tgt = event.target; 

답변

10

event.target은 DOM 노드에 대한 참조입니다. $(event.target)은 jQuery의 마술을 사용하여 DOM을 조작하는 데 사용할 수있는 DOM 노드를 래핑하는 jQuery 객체입니다.

$(event.target).addClass('myClass'); 

을하지만 당신은이 작업을 수행 할 수 없습니다 :

즉,이 작업을 수행 할 수 있습니다

event.tagert.addClass('myClass'); 
+1

jQuery 객체를 반환하는'$()'라는 함수를 호출하지 않습니까? – hippietrail

5

첫 번째 경우 로컬 varialbe $tgt은 jQuery 요소 (DOM 요소를 감 쌉니다)를 유지하고 두 번째 경우에는 DOM 요소를 보유합니다.

DOM 요소에서 직접 jQuery 조작 방법 (예 : .val())을 사용할 수 없으므로 원하는 경우 먼저 jQuery 요소로 변환해야합니다.

2

난 그냥 요소를 잡아 $(this)를 사용하여 조언을 것입니다. $(event.target) jQuery를 확장 할 것이며, event.target은하지 않습니다 :

$('#list1 li.special button').click(function() { 
    var $tgt = $(this); 
}); 

귀하의 질문에 대답하기 : jQuery를 내부적으로 그래서 당신은 필요가 없습니다 않습니다.

+0

명확히하기 위해 jQuery 이벤트 핸들러에서 this와 event.target의 차이점은 'this'가 핸들러를 지정한 DOM 요소라는 것입니다. event.target은 실제로 이벤트를받은 요소입니다. 예 : 다른 코드를 포함하는 div에 클릭 핸들러를두면 핸들러는 div 태그 인 이벤트를 가져오고 event.target은 실제로 가장 많이 중첩 된 태그가 실제로 클릭 된 것입니다. –

+0

그렇지 않습니다. click 이벤트가 문서의 모든 단락 태그에 바인드되는 경우, 예를 들어 핸들러 내의 'this'는 클릭 된 단일 요소를 참조합니다. 핸들러가 바인딩되었습니다. $ ('p'). 클릭 (function() {/ * (클릭) 된 특정 단락을 참조 할 것입니다 * /}); – brianreavis

관련 문제