Hello Readers,
Today’s post is about gestures and events in ionic framework. Ionic framework provides gestures and events to make application more effective.

These are the following gestures and events with Example:

• on-hold :  This event works when we touch and stay on a location for 500ms( milliseconds ).

Example :

<button on-hold="onHold()" class="button">Test</button>

$scope.onHold = function()
{
    alert("On hold");
}

• on-tap :  It works on quick touch or tap on a location. So the tap is not more than 250ms otherwise it is not a tap gesture.

Example :

<button on-tap="onTap()" class="button">Test</button>

$scope.onTap = function()
{
   alert("on Tap");
}

• on-double-tap : On double tap works when double tap on the same location.

Example :

<button on-double-tap="onDoubleTap()" class="button">Test</button>

$scope.onDoubleTap = function()
{
   alert(" Double tap ");
}

• on-touch : When user starts to touch on a location on-touch event called immediately.

Example :

<button on-touch="onTouch()" class="button">Test</button>

$scope.onTouch = function()
{
   alert("On touch");
}

• on-release : This event works when user stop to touch a location.

Example :

<button on-release="onRelease()" class="button">Test</button>

$scope.onRelease = function()
{
   alert(" on release ");
}

• on-swipe : Works when user swipes in any direction( i.e up, down, right, left). We have four swipe gesture an follows:

on-swipe-up :  Event works when a moving touch on  a location with high acceleration to up direction.

on-swipe-left :  Event works when a moving touch on  a location with high acceleration to left direction.

on-swipe-right :  Event works when a moving touch on  a location with high acceleration to right direction.

on-swipe-down : Event works when a moving touch on  a location with high acceleration to down direction.

 Here is the full example of all swipe events :

<ion-view view-title="on Swipe">
    <ion-content class="padding" id="eventPlaceholder" has-bouncing="false">
        <div class="row">
            <div class="col col-50" style="margin: 0 auto;" 
             on-swipe-up="onSwipeUp()">
              <p> Swipe up ..</p>
            </div>
        </div>
        <div class="row">
            <div class="col col-50" on-swipe-left="onSwipeLeft()">
              <p> Swipe Left ..</p>
            </div>
            <div class="col col-50" on-swipe-right="onSwipeRight()">
              <p> swipe right ..</p>
            </div>
        </div>
        <div class="row">
            <div class="col col-50" style="margin: 0 auto;" 
             on-swipe-down="onSwipeDown()">
              <p> Swipe down ..</p>
            </div>
        </div>
    </ion-content>
</ion-view>

angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
    $scope.onSwipeUp = function()
    {
        alert("Swiping in up direction.");
    }
    $scope.onSwipeLeft = function()
    {
        alert("Swiping in left direction.");
    }
    $scope.onSwipeRight = function()
    {
        alert("Swiping in right direction.");
    }
    $scope.onSwipeDown = function()
    {
        alert("Swiping in down direction.");
    }
})

These are the gestures and events introduced by ionic framework. Hope this will help you :)