[JQUERY] $ (이)와 event.target의 차이?

$ (이)와 event.target의 차이?

해결법

1. ---

   1.$ (이)와 event.target, 아주 중요한 하나의 차이가 있습니다. 이 동안 항상 수신기가 부착 된 DOM 요소를 말한다 (또는 event.currentTarget, 아래 참조) event.target 클릭 된 실제 DOM 요소이다. 당신이있는 경우로 인해 이벤트 버블 링에 그 기억

   $ (이)와 event.target, 아주 중요한 하나의 차이가 있습니다. 이 동안 항상 수신기가 부착 된 DOM 요소를 말한다 (또는 event.currentTarget, 아래 참조) event.target 클릭 된 실제 DOM 요소이다. 당신이있는 경우로 인해 이벤트 버블 링에 그 기억

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

   및 외부 DIV에 클릭 리스너를 부착

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

   당신이 외부 DIV뿐만 아니라 내부 하나의 내부를 클릭 할 때 (당신이 핸들 내부 사업부의 이벤트가 전파를 중지하도록 다른 코드가 없다면) 다음 핸들러가 호출됩니다.

   이 예제에서는 때 다음 핸들러에서, 내부 DIV 내부를 클릭 :

   당신이 그것에의 jQuery 함수를 호출 할 수 있도록 $ 래퍼 JQuery와 (이) 단지의 jQuery 객체의 DOM 요소를 래핑합니다. 당신은 $ (event.target)와 동일한 기능을 수행 할 수 있습니다.

   또한이의 컨텍스트를 리 바인드 경우 (당신은 백본이 자동으로 이루어집니다를 사용하는 경우, 예를 들어), 그것은 뭔가를 가리 않습니다. 당신은 항상 event.currentTarget에서 실제 DOM 요소를 얻을 수 있습니다.

2. ---

   2.이 이벤트가 처리되고있는 DOM 요소 (현재 대상)에 대한 기준이다. event.target 이벤트를 개시 한 요소를 말한다. 그들은이 경우에 동일, 종종이 될 수 있지만, 그들은 그렇게 반드시 항상하지 않습니다.

   이 이벤트가 처리되고있는 DOM 요소 (현재 대상)에 대한 기준이다. event.target 이벤트를 개시 한 요소를 말한다. 그들은이 경우에 동일, 종종이 될 수 있지만, 그들은 그렇게 반드시 항상하지 않습니다.

   당신은 jQuery를 이벤트 문서를 검토하여이의 좋은 감각을 얻을 수 있지만, 요약 할 수 있습니다 :

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

   .attr () 메소드뿐만 아니라 DOM 요소에, JQuery와 객체에서 작동합니다. $ (evt.target) .attr ( 'HREF') 또는 단순히 evt.target.href 당신이 원하는 당신을 줄 것이다.

3. ---

   3.jQuery를가로이 변수를 처리하는 방법에 중요한 다른는 방법 "에"있다

   jQuery를가로이 변수를 처리하는 방법에 중요한 다른는 방법 "에"있다

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

   4.http://api.jquery.com/on/ 상태 :

   http://api.jquery.com/on/ 상태 :

   우리가있는 경우

   <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 요소를 포장 $를 사용하는 것이.

   첫 번째 경우에, 이것은, event.currentTarget는, event.target이 모두 같은 요소에 참조하는 것을 알 것입니다.

   일부 포장 요소에 이벤트 대리인이 트리거되는 때와 event.currentTarget이 이벤트가 전달되는 경우에 참조하는 동안 두 번째 경우에, event.target는, 트리거 요소에 참조 될 것이지만.

   이것과 event.currentTarget, 그들은 같은 일 http://api.jquery.com/event.currenttarget/에 따라 정확히

5. ---

   5.크로스 브라우저 문제는 여기에있다.

   크로스 브라우저 문제는 여기에있다.

   전형적인 비 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를 이벤트 핸들러는이 같은 것 때문에 jQuery를 normalises EVT하고, 이벤트 핸들러에서이 같은 사용할 수있는 대상을 만드는 :

   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
   }
   

6. ---

   6.이벤트 핸들러 함수 또는 오브젝트 메소드 내에서 접근하는 한 가지 방법은 "포함하는 요소"의 속성은 특별한이 키워드를 사용하는 것입니다. 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
   

   이벤트 객체는 모든 이벤트와 연결되어 있습니다. 여기에는 웹 페이지에서 마우스 클릭의 위치로, "사건에 대해"정보를 제공하는 속성이 있습니다.

   예를 들면 :

   <!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
   

from https://stackoverflow.com/questions/12077859/difference-between-this-and-event-target by cc-by-sa and MIT license