What is an Event?
Event is nothing but all possible and different actions of visitor's that a webpage can respond to. We have the ability to create dynamic web pages by using events. In general, Events are actions that can be detected by our Web Application.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Events handling and manipulating are different for mouse and touch events.
jQuery Mobile Touch Events:
Touch events are nothing but the actions that are performed when user touches the screen.
Following events list are some of the touch events which are supported by the jQuery Mobile:
1. Tap event:
The tap event is triggered when the user taps on an element.
The below example describes use of tap event in the jQuery Mobile Framework:
The following example says: When a tap event fires on a <p> element; hide the current <p> element:
<!DOCTYPE html>
<head>
<title>Tap Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("tap",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="main" class="ui-content">
<p>This line will disappear, if you tap on it.</p>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>2. Taphold event:
Fires when user tap on an element and hold for couple of seconds by using id of the page to specify event and on() method attaches the event handlers.
The below example describes use of taphold event in the jQuery Mobile Framework:
Using the above eaxmple we will replace the tap event to taphold event to take effect.
<!DOCTYPE html>
<head>
<title>Taphold Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("taphold",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="main" class="ui-content">
<p>This line will disappear, if you tap on it.</p>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>3. Swipe event:
The swipe event is triggered when the user drag horizontally by more than 30px over an element by using id of the page to specify event and on() method attaches the event handlers.
The below example describes use of swipe event in the jQuery Mobile Framework:
<!DOCTYPE html>
<head>
<title>Swipe Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("swipe",function(){
$("span").text("swipe event occurred!!!");
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="main" class="ui-content">
<p>It will display the text when you swipe here.</p>
<span style="color:orange"></span>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>4. Swipeleft event:
The swipeleft event is triggered when user drag more than 30px over an element in the left direction by using id of the page to specify event and on() method attaches the event handlers.
The below example describes use of swipeleft event in the jQuery Mobile Framework:
<!DOCTYPE html>
<head>
<title>Swipeleft Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("swipeleft",function(){
$("span").text("swipe event occurred!!!");
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="main" class="ui-content">
<p>It will display the text when you swipe left side.</p>
<span style="color:orange"></span>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>5. Swiperight event:
The swiperight event is triggered when user drag more than 30px over an element in the right direction by using id of the page to specify event and on() method attaches the event handlers.
The below example describes use of swiperight event in the jQuery Mobile Framework:
<!DOCTYPE html>
<head>
<title>Swiperight Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
$("p").on("swiperight",function(){
$("span").text("swipe event occurred!!!");
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="main" class="ui-content">
<p>It will display the text when you swipe right side.</p>
<span style="color:orange"></span>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>To Know more about our Django CRM(Customer Relationship Management) Open Source Package. Check Code