Ionic Events


Ionic Events: Ionic provides inbuilt events which can be used frequently. Here we are going to explain the ionic Events. Below is list of ionic Events.


Ionic Events Example | Syntax | Demo

List of Ionic Events –

Event Description
on-hold This is called when touch stays at same place for 500ms.
on-tap This is called on Quick touch when touch is less than 250ms.
on-double-tap This is called when double tap touch.
on-touch This is called immediately when user touches.
on-release This event is called when user ends touch.
on-drag This is called when drag event occurs.
on-drag-up This is called when element is dragged up.
on-drag-right This is called when element is dragged right.
This is called when element is dragged down
on-drag-left This is called when element is dragged left
on-swipe This is called when touch has high moving velocity.
on-swipe-up This is called when touch has high moving velocity in up.
on-swipe-right This is called when touch has high moving velocity in right.
on-swipe-left This is called when touch has high moving velocity in left.
on-swipe-down This is called when touch has high moving velocity in down.

The above methods can be used frequently in your project.

How to use Events in Ionic?

You can call your defined function on any event defined above. Here we are going to explain some with example.

Call Function on ionic Events


<script type="text/javascript">
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.showAlert = function() {
   alert("You touched the button!");
}
});
 
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-touch="showAlert()">Call on touch</div>
 
</div>

The above function will be called when you touch the button. The function will generate the alert message on touch event.


Advertisements

Add Comment

📖 Read More