jQuery Events

Different types of Jquery Event methods :

1. bind( eventType[, eventData], handler)
   • the main one is bind(). This takes an event name and a function name as arguments, and binds the function to that event for the selected element(s).
   • Example:- $('div').bind('click', function( event ){alert('Hi there!'); });
2. unbind(eventType, handler) / unbind(eventType)
   • If you want to remove event handlers from an element we will use unbind() method.
   • Example:-$('div').unbind('click');
   • Event Types: blur, change, click, dblclick, error, keydown, mousedown, mouseenter, mouseleave, select, scroll, submit, unload, resize, ....,... ,.
   • Event Attributes: altKey, ctrlKey, keyCode, pageX, pageY, relatedTarget, screenX, screenY, shiftKey, target, timeStamp, type, which, ....,... ,.
3. preventDefault()
   • Prevents the browser from executing the default action.
   • Example:- $("a").click(function(event){ event.preventDefault(); alert( "Default behavior is disabled!" );
4. isDefaultPrevented()
   • Returns whether event.preventDefault() was ever called on this event object.
   • Example:-$("a").click(function(event){ event.preventDefault();
     if(event.isDefaultPrevented())
     alert( "Default behavior is disabled!" );
5. stopPropagation()
   • Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.
   • Example:- $("div").click(function(event){
     alert("This is : " + $(this).text());
     event.stopPropagation(); });
6. isPropagationStopped()
   • Returns whether event.stopPropagation() was ever called on this event object.
   • Example:-$("div").click(function(event){
     alert("This is : " + $(this).text());
     if ( event.isPropagationStopped() ){
     alert( "Event bubbling is disabled - 1" );
     }else{
     alert( "Event bubbling is enabled - 1" ); }});
7. stopImmediatePropagation()
   • Stops the rest of the handlers from being executed.
   • Example:- $("div").click(function(event){
     alert("1 - This is : " + $(this).text());
     event.stopImmediatePropagation(); });
     // This won't be executed.
     $("div").click(function(event){
     alert("2 - This is : " + $(this).text()); });
8. isImmediatePropagationStopped()
   • Returns whether event.stopImmediatePropagation() was ever called on this event object.
9. toggle( fn, fn2, fn3,... )
   • Toggle among two or more function calls every other click.
   • Example:- $("div").toggle(
     function () {
     $(this).css({"background-color":"red"});
     },
     function () {
     $(this).css({"background-color":"yellow"});
     },
     function () {
     $(this).css({"background-color":"black"});
     }
     );
10. trigger( event, [data] )
    • Trigger an event on every matched element.
11. triggerHandler( event, [data] )
    • Triggers all bound event handlers on an element .
12. Event Helper Methods:
    • jQuery also provides a set of event helper functions which can be used either to trigger an event to bind any event types mentioned above.
    • Example:-$("div").click( function () {  });
    • blur( ), blur( fn ), change( ), dblclick( ), error( fn ) .......,

Examples on Jquery Events

   

$('#ZoomIN').toggle(
function(){ $('#imgddn').css({"width":"40px","height":"10px"}); },
function(){ $('#imgddn').css({"width":"60px","height":"15px"}); },
function() { $('#imgddn').css({ "width": "80px", "height": "20px" }); },
function() { $('#imgddn').css({ "width": "100px", "height": "25px" }); },
function() { $('#imgddn').css({ "width": "120px", "height": "30px" }); },
function() { $('#imgddn').css({ "width": "140px", "height": "35px" }); },
function() { $('#imgddn').css({ "width": "160px", "height": "40px" }); },
function() { $('#imgddn').css({ "width": "180px", "height": "45px" }); },
function() { $('#imgddn').css({ "width": "200px", "height": "50px" }); } );

<script type="text/javascript">
$("#htm").click(function() {
var va = $("#p1").html();
$("#p2").html(va);
});
 
$("#txt").click(function() {
var va = $("#p1").text();
$("#p2").text(va);
});
</script>