<div class="container" data-ng-app=""> <div ng-controller="mainCtrl"> <div class="box" ng-click="handleEvt('박스를 클릭됐다.')">click</div> <div class="box" ng-mousedown="handleEvt('박스 mousedown 이벤트 발생.')">mousedown</div> <div class="box" ng-mouseenter="handleEvt('박스 mouseenter 이벤트 발생.')">mouseenter</div> <div class="box" ng-mousemove="handleEvt('박스 mousemove 이벤트 발생.')">mousemove</div> <div> change : <input type="text" ng-model="inputText" ng-change="handleEvt('입력박스의 값이 변경되었다.')" /> </div> <div> keydown : <input type="text" ng-model="inputText2" ng-keydown="handleEvt($event.keyCode+'키코드 눌러짐')" /> </div> <br/> <div> <p class="well"> message : {{message}}<br/> event Count : {{eventCnt}} </p> </div> </div> </div>
.box { display: inline-block; width: 100px; height: 100px; margin: 10px; background-color: black; color: white; text-align: center; padding-top: 40px; }
var mainCtrl = function($scope){ $scope.message = ''; $scope.eventCnt = 0; $scope.handleEvt = function(message){ $scope.message = message; $scope.eventCnt++; }; };