[JQUERY] 자바 스크립트 - 이벤트 핸들러의 기능이 화살표?

자바 스크립트 - 이벤트 핸들러의 기능이 화살표?

해결법

1. ---

   1.대신 핸들러가 결합되는 요소를 얻기 위해 이것을 사용하는 콜백으로 화살표 기능을 사용하면 event.currentTarget를 사용해야합니다. 화살표 기능이 내부의 값은 화살표 함수가 정의에 따라 결정된다 아닌 곳 지금부터 used.So 인 것을 명심 event.currentTarget 항상 현재 EventListeners를 처리하고있는 DOM 요소를 지칭한다.

   대신 핸들러가 결합되는 요소를 얻기 위해 이것을 사용하는 콜백으로 화살표 기능을 사용하면 event.currentTarget를 사용해야합니다. 화살표 기능이 내부의 값은 화살표 함수가 정의에 따라 결정된다 아닌 곳 지금부터 used.So 인 것을 명심 event.currentTarget 항상 현재 EventListeners를 처리하고있는 DOM 요소를 지칭한다.

   대신 때문에 이벤트 버블 링 / 캡처의 event.target의 사용 event.currentTarget :

   문서에서 :

   아래의 코드에서 기본 예제를 확인

   VAR 부모 = document.getElementById를 ( '부모'); parent.addEventListener ({), 기능 (예 '를 클릭' . document.getElementById를 ( 'MSG') innerHTML을 = "이 :"+ this.id + "로
   currentTarget :"+ e.currentTarget.id + "로
   대상 :"+ e.target.id; }); $ ( '# 부모'). ({), 기능 (예 '를 클릭'에 . $ ( '# jQmsg') HTML ( "* jQuery를이
   :"+ $ (이) .prop ( 'ID') + "로
   currenTarget :"+ $ (e.currentTarget) .prop ( 'ID') + "로
   대상 :"+ $ (e.target) .prop ( 'ID')); }); $ ( '# 부모')에 ( '클릭', E => $ ( '#의 arrmsg') HTML ( '* currentTarget로
   화살표 기능 :'. + e.currentTarget.id)).; #parent {배경 색 : 레드; 폭 : 250 픽셀; 신장 220px} #child {배경 색 : 노란색, 높이 : 120 픽셀, 폭 : 120 픽셀, 여백 : 0 자동;} # 그랜드 아이 {배경 색 : 블루, 높이 50 픽셀, 폭 : 50 픽셀; 여백 : 0 자동;} #msg, #jQmsg, #arrmsg {폰트 사이즈 : 16px; 폰트 중량 : 600; 배경색 : #eee, 폰트 패밀리 : 세리프체] 색상 : 네이비} <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   부모 - (연결된 이벤트 핸들러) 한국어로
   

   아이로
   로
   

   그랜드 아이

   로
   

   로
   

2. ---

   2.당신은하지 않을 것입니다.

   당신은하지 않을 것입니다.

   이 값을 변경하는 것은 화살표 함수를 사용하는 주요 점이다.

   당신이 그렇게하지 않으려면 다음 화살표 기능은 작업에 대한 잘못된 도구입니다.

3. ---

   3.대신 $의 $ (event.target) (이)도 내부의 화살표 기능을 사용할 수 있습니다. 화살표 함수가 정의 된 범위의이 보존되어있다. 귀하의 경우에는 그것은 정의되지 않는다.

   대신 $의 $ (event.target) (이)도 내부의 화살표 기능을 사용할 수 있습니다. 화살표 함수가 정의 된 범위의이 보존되어있다. 귀하의 경우에는 그것은 정의되지 않는다.

4. ---

   4.화살표 기능은 문맥을 둘러싸에서이 유지됩니다. 예.

   화살표 기능은 문맥을 둘러싸에서이 유지됩니다. 예.

   obj.method = function(){
       console.log(this);
       $('a').click(e=>{
               console.log(this);
       })
   };
   obj.method(); // logs obj
   $('a').click(); // logs obj
   

   이미 수 - 액세스 이벤트 대상에 당신은 $ (e.target) 같은 것을 사용할 수 있지만, 버블 조심. 그래서 내가 대신 콜백으로 정상적인 기능을 사용하는 것이 좋습니다.

from https://stackoverflow.com/questions/36915875/javascript-arrow-functions-this-in-event-handler by cc-by-sa and MIT license