AngularJS #17 - Events

✔ AngularJS Events

 > AngularJS만의 HTML events directives가 있다

 

1. AngularJS Events

 > 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의 이벤트 directive를 통해서 우리는 특정 사용자 이벤트를 잡아낼 수 있는데, 이때 angularJS의 event directive와 HTML의 event가 같이 존재한다면 angularJS의 event directive와 HTML event가 같이 실행된다. 즉, angularJS event directive가 HTML event를 덮어쓰지 않는다

 

 

2. Mouse Events

 > 마우스 events는 커서가 요소 위로 움직일 때, 혹은 클릭을 했을 때 일어난다

<div ng-app="myApp" ng-controller="myCtrl">
 <h1 ng-mousemove="count = count + 1">Mouse over me!</h1>
 <h2>{{ count }}</h2>
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope){
  $scope.count = 0;
 });
</script>

 

 

3. The ng-click Directive

<div ng-app="myApp" ng-controller="myCtrl">
 <button ng-click="count = count + 1">Click me!</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()">Click me!</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>

 : ng-click에 함수를 써도 된다

 

 

4. Toggle, True/False

<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>Coke</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 변수는 boolean type 'false'로 시작된다.

 

 

5. $event Object

 > $event object를 함수를 호출할때 인자로 넘길 수 있다. $event object는 browser의 event object를 포함한다

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

 

 

 

 

 

 

** 위 글은 w3schools.com에 있는 내용을 한국어로 번역하여 적어둔 글입니다.

- https://www.w3schools.com/angular/angular_events.asp

Angular HTML Events