CodeDairy.com

jQuery Events

<<<< jQuery Tutorial part 10

   jQuery provides an easy way to work with events than actually using DOM to workout.
As we know jQUery provides a cross browser support. We need not worry about different browsers behaviour for certain events.
We use jQuery filters and selectors to better assigning the event handlers for page elements.

jQuery offers various event categories

1. Event handler attachments – binding and unbinding events to the elements
2. Form events
3. Mouse events
4. Keyboard events

Event hanlder attachments

• .bind() This is to attach an handler to an event for the elements.

  For example 1,

  	$('#div').bind('click', function() { 
  
  	  alert('Hey ! You clicked me "by Div"');
  
  	});
      

  Now, whenever user click inside the div element,the alert message will be shown up.

  We can also register multiple handlers and they will always execute in the order in which we specified.
  For example 2, below code toggles the yellowIt css class for both events mouseenter and mouseleave.

      
         h4.yellowIt { background: #ccc; } 
  
  
      
         $("h4").bind("mouseenter mouseleave", function(event){
  
         $(this).toggleClass("yellowIt");
  
  
      

• .delegate()To attach a handler to one or more events for all elements that match the jquery selector
  The advantage of this delegate is that they can process events from descendant elements that are added to the document at a later time

       syntax:
       
  
       	delegate( selector, eventType, handler )
  
       

  selector: selector to filter the elements

  eventType: event types like “click” or “keydown” or you could write your own custom events.

  handler: function to execute when the event is triggered.

  For example, to display an alert message when h1 heading tag is clicked

  
       $("body").delegate("h1", "click", function(){
  
         alert( "You clicked me" + $(this).text());
  
       });
  
        
        

• .live()This is to attach an event handler for all elements for the matched selector and also the future mataching elements.

if you’re working on jQuery 1.7 or above, then this method is deprecated. Suggestion is to use .on() method instead.

• .die()This is similar to .unbind(), it basically removes all event handlers previously attached using .live()

  For example: To unbind all live events from h1 tags, We write:

  	$("h1").die()
  
  
     

  For example: To just unbind only click events for all h1 tags, We write like this

  	$("p").die( "click" )
  
     

• .on()To attach an event handler function for one or more events to the selected elements.

  For Example: To display a h1 text in an alert when it is clicked:

     
  	$("h1").on("click", function(){
  
  	 alert( $(this).text() );
  
  	});
  
      

• .off()Remove an event handler.
  This method simply removes event handlers that were attached with .on() method.

  For example: To remove all event handlers from all h1 tags

    
    	$("h1").off()
  
    
    

  For example: To remove all delegated click handlers from all h1 tags

    	$("h1").off( "click", "**" )
  
     

• .one() Use this handler to attached an event for the elements to be executed at most once per element.

  For example

       
  	$('#div').one('click', function() {
  
  	    alert('You can only see this message only once!');
  
  	});
  
      

• .unbind()This is simply removes the previously attached event handler from the elements.

  For exampe, to remove attached event handlers for div element

  	$('#div').unbind();
  
        

  We can also pass in the even type too

    $(‘#foo’).unbind(‘click’);
• .undelegate() This is again simple and it just removes a handler from the event for all match elements for the current selector

  For Example: To remove all delegated events from h1 elements

  	$("h1").undelegate()
  
  

  Example: To remove all delegated click events from all h1 elements
  

  	$("h1").undelegate( "click" )
  
  
   


>>>> jQuery Tutorial part 12


Thanks for reading my post. please do not hesitate to post your comments or ask any questions below ( or even you find any mistakes too )




Share|

Related posts:

1. jQuery Tutorials part 4
2. jQuery Tutorials part 6
3. jQuery Tutorials part 9
4. jQuery Tutorials part 2
5. jQuery Tutorials part 5