[Angular] AngularJS 튜토리얼 15. 이벤트(Events)

AngularJS는 자체 HTML 이벤트 지시어를 가지고 있다.

 

아래의 디렉티브를 사용해서 HTML 요소에 하나 이상의 AngularJS 이벤트 리스너를 추가할 수 있다.

 

• 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

HTML 이벤트에 덮어씌워지는 것이 아니기 때문에, AngularJS의 이벤트와 HTML 이벤트 모두가 발생한다.

 

 

[ 마우스 이벤트 ]

 

: HTML 요소 위로 마우스를 움직였을 때 아래와 같은 순서로 이벤트가 발생한다.

 

1. ng-mouseover
2. ng-mouseenter
3. ng-mousemove
4. ng-mouseleave

 

한편 마우스로 어떠한 요소를 클릭했을 때는 아래의 순서로 이벤트가 발생한다.

 

1. ng-mousedown
2. ng-mouseup
3. ng-click

	<div ng-app="myApp" ng-controller="myCtrl">
		<h1 ng-mousemove="count = count + 1">Mouse Over me!</h1>
		<h1>{{count}}</h1>
	</div>
	
	<script>
		var app = angular.module('myApp',[]);
		app.controller('myCtrl', function($scope) {
			$scope.count = 0;
		});
	</script>

 

mouseover시 count 값이 올라간다

 

 

[ ng-click 디렉티브 ]

 

: 클릭시 발생한다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
		<h1 ng-click="count = count + 1">Click me!</h1>
		<h1>{{count}}</h1>
	</div>
	
	<script>
		var app = angular.module('myApp',[]);
		app.controller('myCtrl', function($scope) {
			$scope.count = 0;
		});
	</script>

클릭 시 count 가 올라간다

	<div ng-app="myApp" ng-controller="myCtrl">
		<h1 ng-click="myFunction()">Click me!</h1>
		<h1>{{count}}</h1>
	</div>
	
	<script>
		var app = angular.module('myApp',[]);
		app.controller('myCtrl', function($scope) {
			$scope.count = 0;
			$scope.myFunction = function() {
				$scope.count ++;
			}
		});
	</script>

function 으로 바꿀 수도 있다.

 

 

[ Toggle, True/False ]

 

: dropdown 메뉴와같이 버튼을 클릭했을 때 특정 HTML 섹션이 보였다가 숨겨졌다가 하게 하려면, 버튼을 toggle switch 처럼 동작하게 하면 된다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
		<button ng-click="myFunc()">Click me!</button>
		
		<div ng-show="showMe">
			<h1>Menu:</h1>
			<div>Pizza</div>
			<div>Pasta</div>
			<div>Curry</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>

 

 

 

[ $event 객체 ]

 

: 함수를 호출할 때 $event 객체를 파라미터로 넘길 수 있다. $event 객체는 브라우저의 이벤트 객체를 가지고 있다.

 

	<div ng-app="myApp" ng-controller="myCtrl">
		<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>
		<p>Coordinates: {{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>

마우스의 좌표가 나타난다

 

$event 객체