Introduction:
I will explain jQuery Basic Event Handling example
Example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Javascript -->
<script type="text/javascript">
var interval = 2000;
$(document).ready(function (){
$("#event1").bind("click", function(){
$("#result1").show().fadeOut(interval);
});
$("#event2").focus(function(){
$("#result2").show().fadeOut(interval);
$("#result2_1").hide();
});
$("#event2").blur(function(){
$("#result2").hide();
$("#result2_1").show().fadeOut(interval);
});
$("#event3").keydown(function(){
$("#result3").show();
$("#result4").hide();
});
$("#event3").keyup(function(){
$("#result3").hide();
$("#result4").show();
});
$("#event5").change(function(){
$("#result5").show().fadeOut(interval);
});
$("#btn211").click(function(){
$("#example-section21 span[id^='result']").hide();
});
});
</script>
</head>
<!-- HTML -->
<a href="https://www.blogger.com/blogger.g?blogID=4695737620265728634" name="#focus-blur-click-change-keydown-keyup-event"></a>
<div id="example-section21">
Click Event : <input id="event1" style="width: 300px;" value="click on me" />
<span id="result1" style="color: blue; display: none;">
onclick event triggered!</span>
<br />
Focus and Blur Event :
<input id="event2" style="width: 300px;" value="click me and click somewhere else" />
<span id="result2" style="color: blue; display: none;">onfocus event triggered!</span>
<span id="result2_1" style="color: blue; display: none;">onblur event triggered!</span>
<br />
Keydown, keyup Event :
<input id="event3" style="width: 300px;" value="type something here" />
<span id="result3" style="color: blue; display: none;">onkeydown event triggered!</span>
<span id="result4" style="color: blue; display: none;">onkeyup event triggered!</span>
<br />
Change Event :
<input id="event5" style="width: 300px;" value="change the value here" />
<span id="result5" style="color: blue; display: none;">onchange event triggered!</span>
<br />
<button id="btn211" type="button">Reset</button>
</div>
</body>
</html>
Demo:
0 comments :
Post a Comment