Ionic - Javascript Events

Advertisements

Previous Page
Next Page  

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.

Advertisements