AngularJS 이벤트

AngularJS는 자신의 HTML 이벤트 지시어를 가지고 있습니다.

AngularJS 이벤트

다음 하나 이상의 지시어를 사용하여 AngularJS 이벤트 리스너를 HTML 요소에 추가할 수 있습니다:

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

이벤트 명령어는 특정 사용자 이벤트에서 AngularJS 함수를 실행할 수 있게 합니다.

AngularJS 이벤트는 HTML 이벤트를 대체하지 않으며, 두 이벤트 모두 실행됩니다.

마우스 이벤트

요소에 마우스가 이동할 때, 다음 순서로 마우스 이벤트가 발생합니다：

• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave

또는, 요소를 클릭할 때, 다음 순서로 이벤트가 발생합니다：

• ng-mousedown
• ng-mouseup
• ng-click

HTML 요소에 어떤 마우스 이벤트를 추가할 수 있습니다.

예제

H1 요소에 마우스를 가져가면 count 변수를 증가시킵니다：

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">마우스를 위에 가져가세요!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

직접 시도해보세요

ng-click 지시

ng-click 지시는 요소가 클릭될 때 AngularJS 코드를 실행하도록 정의합니다.

예제

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">클릭하세요!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

직접 시도해보세요

함수를 참조할 수도 있습니다：

예제

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">클릭하세요!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

직접 시도해보세요

전환, 참/거짓

클릭할 때 HTML 코드의 일부를 표시하고 다시 클릭할 때 숨기려면, 드롭다운 메뉴처럼 버튼을 스위치처럼 사용하십시오:

예제

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">클릭하세요!</button>  
<div ng-show="showMe">  
  <h1>메뉴：</h1>  
  <div>피자</div>  
  <div>이탈리아면</div>  
  <div>해산물</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

직접 시도해보세요

showMe 변수는 초기에 부울 값으로 시작합니다. false.

myFunc 함수를 사용하여 !비(논리) 연산자로 showMe 변수를 현재 값과 반대의 값을 설정할 수 있습니다.

$event 객체

함수 호출 시 $event 객체를 매개변수로 전달합니다.

$event 객체는 브라우저 이벤트 객체를 포함하고 있습니다:

예제

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">마우스를 위로 이동하세요!</h1>
<p>좌표: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

직접 시도해보세요