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.|
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.