Web Programming TutorialsLearn about Keyboard and Mouse Events in AngularJS

Learn about Keyboard and Mouse Events in AngularJS

keyboard and mouse events

In this tutorial, we’re going to go over all the keyboard and mouse events we can use with AngularJS. With AngularJS, you can bind mouse events to event handlers and pass the event as a parameter of the handlers. We’re going to start with a practical example. We’ll create a div with a controller and place an input box inside it. We’ll target the ng-blur event whenever a user clicks the mouse inside the input box.

<div ng-controller="keyEvents">
<input ng-blur="blur = blur + 1"/>

In the JS, we’re going to give blur a default value of 0, like so:

var app1 = angular.module('app1', []);
app1.controller('keyEventsl', function($scope) {
$scope.blur = 0;

Let’s add a number of other events, in the exact same way as ng-blur, like so:

<input ng-blur="blur = blur + 1"
      ng-cut="cut = cut + 1"
      ng-paste="paste = paste + 1"
      ng-focus="focus = focus + 1"
      ng-copy="copy = copy + 1"
      ng-model="confirmed"
      ng-click="click = click + 1"
      ng-dblclick="dblclick = dblclick + 1"
      ng-change="change = change + 1" />

An exception is ng-keydown, which passes an event to the Javascript  whenever the user presses any key on the keyboard.

ng-keydown="keydown($event)"

Let’s give all of these a default value of 0 in the JS file:

app4.controller('eventCtrl', function($scope) {
  $scope.blur = 0;
  $scope.cut = 0;
  $scope.copy = 0;
  $scope.paste = 0;
  $scope.focus = 0;
  $scope.click = 0;
  $scope.dblclick = 0;
  $scope.change = 0;
$scope.mouseenter = 0;
 $scope.mouseleave = 0;

With regards to ng-keydown, we need to find out what key was pressed – We pass the event as a parameter called ‘e’ to a function which handles it by converting the key code into letters and/or numbers.

$scope.keydown = function(e){
    $scope.fkey= String.fromCharCode(e.keyCode);
}

Let’s organize the output:

     <h4>Blur  : {{blur}}</h4>
      <h4>Cut  : {{cut}}</h4>
      <h4>Paste  : {{paste}}</h4>
      <h4>Focus  : {{focus}}</h4>
      <h4>Copy  : {{copy}}</h4>
      <h4>Click  : {{click}}</h4>
      <h4>Double Click  : {{dblclick}}</h4>
      <h4>Change : {{change}}</h4>
      <h4>Key Press : {{fkey}}</h4>
       <h4>Mouse Enter  : {{mouseenter}}</h4>
      <h4>Mouse Leave  : {{mouseleave}}</h4>

This has been a run-down of all the events we can use. Let’s try to use the ng-mouseenter and ng-mouseleave directives in a different way. We’ll bind them to the mouseenter/mouseleave event handlers to display the coordinates at which the user enters/leaves an object.  The HTML:

ng-mouseenter="mouseenter($event)"
ng-mouseleave="mouseleave($event)"

We’ll give our object a unique id, <div id=”cube”></div>.
We’re going to use the help of jQuery to display the coordinates, like so:

$scope.mouseenter = function(e) {
  $( "#cube" ).text( "pageX: " + e.pageX + ", pageY: " + e.pageY );
  };
  $scope.mouseleave =  function(e) {
  $( "#cube" ).text( "pageX: " + e.pageX + ", pageY: " + e.pageY );
  };

keyboard event output

In summary, we’ve gone over all the mouse and key events we can use with Angular JS by giving a practical example for each of the directives. We have seen how simple it is to bind mouse events to event handlers using Angular directives, as well as passing the events as parameters. We finished off with an example in which we use jQuery as well as Angular to display mouse coordinates at the time of a mouse event.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -