Ionic - Javascript Events

Various Ionic events can be used to add interactivity with users. The following table explains all the Ionic events.

Event Name	Event Detail
on-hold	Called when duration of the touch is more than 500ms.
on-tap	Called when duration of the touch is less than 250ms.
on-double-tap	Called when there is double tap touch.
on-touch	Called immediately when touch begins.
on-release	Called when touch ends.
on-drag	Called when touch is moved without releasing around the page in any direction.
on-drag-up	Called when element is dragged up.
on-drag-right	Called when the element is dragged to the right.
on-drag-left	Called when the element is dragged to the left.
on-drag-down	Called when the element is dragged down.
on-swipe	Called when any dragging has high velocity moving in any direction.
on-swipe-up	Called when any dragging has high velocity moving up.
on-swipe-right	Called when any dragging has high velocity moving to the right.
on-swipe-left	Called when any dragging has high velocity moving to the left.
on-swipe-down	Called when any dragging has high velocity moving down.

Using Events

Since all the Ionic events can be used the same way, we will show you how to use the on-touch event and you can just apply the same principles to the other events. To start with, we will create a button and assign an on-touch event, which will call the onTouchFunction().

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

Then we will create that function in our controller scope.

$scope.onTouchFunction = function() {
   // Do something...
}

Now, when touch event occurs the onTouchFunction() will be called.