웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > angularjs

AngularJS ngClick 사용시 이벤트 객체를 받아오는 방법

Last Modified : 2017-08-11 / Created : 2017-07-07
10,676
View Count
ngClick 디렉티브를 사용하여 이벤트를 호출시 클릭했던 엘리먼트를 불러오는 방법에 대하여 알아봅니다. 만약 아래 코드의 버튼을 클릭한 후 ng-click 디렉티브에서 클릭된 event 객체의 요소를 알아내려면 어떻게할까요?


# AngularJS 클릭한 요소 알아내기
먼저 클릭이벤트가 발생할 경우 자바스크립트는 이벤트 객체에 해당 정보를 저장합니다. 이벤트 객체를 angular js에서 반환받는 방법과 어떤 속성이 클릭 요소를 가지고 있는지 알아야합니다.
<button ng-click="clickMe()">Click</button>

이때 스크립트 코드에서 이벤트 객체는 $event입니다. $event.currentTarget은 클릭된 요소를 가지고 있습니다.

$scope.clickMe = function($event) {
  var elem = $event.currentTarget;
}

자바스크립트의 event.target과 혼동될 수 있으니 알아둬야 합니다. 참고로 크로스 브라우징(브라우저 호환)을 위하여 아래의 방법도 사용됩니다.

var elem = $event.currentTarget || $event.srcElement;

이 방법 역시 알아두면 유용합니다.

Previous

AngularJS에서 ngChecked 사용하여 체크박스, 라디오 체크 변경하기

Previous

angularJS의 ngOptions 설정시 숫자만 사용하는 경우 방법