AngularJS Event Handling Introduction

AngularJS Event Handling Introduction

When creating more advance and critical AngularJS applications, then sooner or later your application will need to handle DOM events such as moves, mouse clicks, change events and keyboard presses. AngularJS provides a simple model for how to add event listeners to the HTM (Hyper Text Markup Language) you generate from your views.

Some Event Handlers are:

  • Keyboard Events
  • Change Events
  • Mouse Events

AngularJS Event Handling

The Keyboard Events

Example

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>
 
<body ng-app="mainModule">
  <div ng-controller="mainController">
    <label>Type some Text:
      <input type="text"
             ng-keydown="onKeyDown($event)"
             ng-keyup="onKeyUp($event)"
             ng-keypress="onKeyPress($event)" />
    </label><br />
    <strong>KEY DOWN RESULT:</strong> {{onKeyDownResult}}<br />
    <strong>KEY UP RESULT:</strong> {{onKeyUpResult}}<br />
    <strong>KEY PRESS RESULT:</strong> {{onKeyPressResult}}
  </div>
</body>
</html>

Code Explanation

AngularJS provide us a way to bind event handlers for keyboard events with the ability to use Dependency Injection (DI) with the arguments of the handlers. Given here are some directives useful for keyboard events like this:

  • ng-keypress
  • ng-keydown
  • ng-keyup

This example we pass the $event variable to the event handlers to decode the key that was pressed. The $event is just like the same KeyboardEvent variable that we would have from the attractive forceful browser while working with plain JavaScript.

The Change Events

If you need to know when an input element state changes due to user interaction, we can also use the ng-change directive.

Example:

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>
 
<body ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>Step 1. Text input with and without a change event handler</h3>
    Type something<br />
    <label>Input with change event: <input type="text" ng-model="editValue" ng-change="onEditChange()" /></label><br />
    <label>Input without change event: <input type="text" ng-model="editValue" /></label><br />
    <strong>RESULT:</strong> {{onEditChangeResult}}<br />
    <br />
    <h3>Step 2. Change event on checkbox</h3>
    Select a checkbox<br />
    <label>Check1: <input type="checkbox" ng-model="check1Selected" ng-change="onCheckBoxChange()" /></label><br />
    <label>Check2: <input type="checkbox" ng-model="check2Selected" ng-change="onCheckBoxChange()" /></label><br />
    <strong>RESULT:</strong> {{onCheckBoxChangeResult}}<br />
    <br />
    <h3>Step 3. Change event on text input without model</h3>
    <label>Type something: <input type="text" ng-change="onEditNoModelChange()" /></label><br />
    <strong>RESULT:</strong> {{onEditNoModelChangeResult}}<br />
  </div>
</body>
</html>

Code Explanation

In this example, we have two different text input elements bound to the same editValue model variable. The first input is a change handler called onEditChange and the second one has no change handlers. When you type some text in the first input you can see that the value of the model variable is changed and the change handler id fired thus updating the result string, and if you type some text in the second input you see that the model variable still changes, however the change handler is not fired, because the change on the first input is not due to a user friendly, but to a change in the model.

AngularJS Event Handling

The Mouse Events

AngualrJS provide us a way to bind event handlers for mouse with the eligibility to use DI (Dependency Injection) with the arguments of the handlers.

Example:

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>
 
<body ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>Step 1. Click</h3>
    <button id="firstBtn" ng-click="onFirstBtnClick()">Click me</button>
    <strong>RESULT:</strong> {{onFirstBtnClickResult}}<br />
    <br />
    <h3>Step 2. Click with Dependency Injection</h3>
    <label>Type something: <input type="text" ng-model="secondBtnInput"></label>
    <button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">Click me</button><br />
    <strong>RESULT:</strong> {{onSecondBtnClickResult}}<br />
    <br />
    <h3>Step 3. Double click</h3>
    Double-click the square<br />
    <img src="images/square.png" ng-dblclick="onDblClick()" /><br />
    <strong>RESULT:</strong> {{onDblClickResult}}<br />
    <h3>Step 4. Mouse down, up, enter, leave, move, over</h3>
    Move the mouse on the square<br />
    <img src="images/square.png"
         ng-mousedown="onMouseDown($event)"
         ng-mouseup="onMouseUp($event)"
         ng-mouseenter="onMouseEnter($event)"
         ng-mouseleave="onMouseLeave($event)"
         ng-mousemove="onMouseMove($event)"
         ng-mouseover="onMouseOver($event)" /><br />
    <strong>MOUSE DOWN RESULT:</strong> {{onMouseDownResult}}<br />
    <strong>MOUSE UP RESULT:</strong> {{onMouseUpResult}}<br />
    <strong>MOUSE ENTER RESULT:</strong> {{onMouseEnterResult}}<br />
    <strong>MOUSE LEAVE RESULT:</strong> {{onMouseLeaveResult}}<br />
    <strong>MOUSE MOVE RESULT:</strong> {{onMouseMoveResult}}<br />
    <strong>MOUSE OVER RESULT:</strong> {{onMouseOverResult}}
  </div>
</body>
</html>

Code Description

Given here are some directives helpful for mouse events like this:

  • ng-mouseover
  • ng-dblclick
  • ng-mouseleave
  • ng-mouseup
  • ng-mouseenter
  • ng-mousemove
  • ng-mousedown
  • ng-click

These names of the directives create it easier to understand what they are used for, so look above example.