Ionic Basics Tutorial
Ionic CSS Components
Ionic Javascript Components
Ionic Advanced Concepts
Ionic Useful Resources
Selected Reading
Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - JS Events
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.
Advertisements