jquery event

we have the ability to create dynamic web pages by using events.events are actions that can be detected by your web application.

examples:-

  • a mouse click
  • moving a mouse over an element.
  • clicking on an element.
  • a web page loading.
  • a keystroke on your keyboard

here are some common dom events:

mouse eventskeyboard eventsform eventsdocument/window events
clickkeypressfocusload
dblclickkeydownsubmitunload
mouseenterkeyupchangeready
hoverfocusoutblurscroll
mousemoveselecterror

events types

document/window events

mouse events

keyboard events

form events


binding event

description:  attach a handler to an event for the elements.

the syntax of the bind() command is as follows:-

               selector.bind( eventtype[,eventdata],handler(eventobject))

eventtype:-a string containing one or more dom event types,such as 'click' or 'submit'.

eventdata: an object containing data that will be passed to the event handler.

handler(eventobject):-a function to execute each time the event is triggered.

example

 $(document).ready(function(){
                
                $("div").bind("click",function(){
                 
                 alert("this time click event generates");
                  
                $("img").slideUp(5000);
                
                       }); });

removing event handlers:

the jquery provides the unbing() method to remove a previously-attached event handler from the elements.

the syntax :

          selector.unbind( [eventtype],[handler(eventobject)])

or

          selector.unbind(eventType)

eventType:string containing a javascript event type such as click or submit.

handler(eventObject):the function that is to be no longer executed.

example

                   $(document).ready(function(){
                   
                   $("img").bind("click",function(){
                   
                   $(this).slidetoggle(4000);
                   
                      });
                   
                   $("button").click(function(){
                   
                   $("img").unbind();
                   
                     }); });

jquery evens types

document loading events

$(document).ready()

the $(document).ready() method allows us to execute a function when the document is fully loaded.


mouse events

.click()

the click() method attaches an event handler function to an html element.

the function is executed when the user clicks on the html element.

example

             $(document).ready(function(){
             
             $("div").click(function(){
             
                 alert("the div element was clicked");                 
              
                });

 });

.dbclick()

the dbclick() method attaches an event handler function to an html element.

the function is executed when the user double-clicks on the html element.

example

                   $(document).ready(function(){
                   
                   $("div").dblclick(function(){
                   
                   alert("the div element was double-clicked");
                   
                      });
 });

.mouseup()

the mouseup() method attaches an event handler function to an html element.

the function is executed when the user left mouse button is released.while the mouse is over the html element.

example

                   $(document).ready(function(){
                   
                   $("div").mouseup(function(){$(this).slideup(2000);
                   
                        });

 });

.mousedown()

the mousedown() method attaches an event handler function to an html element.

the function is executed when the user left mouse button is pressed down.while the mouse is over the html element.

example

                   $(document).ready(function(){
                   
                   $("div").mousedown(function(){$(this).slideup(2000);}); });

.mouseenter()

the mouseenter() method attaches an event handler function to an html element.

the function is executed when the mouse pointer enters the html element.

example

         $(document).ready(function(){
                   
         $("div").mouseenter(function(){$(<img>).toggle(6000);

                   }); });

.mouseleave()

the mouseleave() method attaches an event handler function to an html element.

the function is executed when the mouse pointer leaves the html element.

example

            $(document).ready(function(){
                   
            $("div").mouseleave(function(){$(<img>).toggle(6000);
                   
                   }); }); 

jquery form events

.focus()

the focus() method attaches an event handler function to an html form field.

the function is executed when the form field get focus.

.blur()

the blur() method attaches an event handler function to an html form field.

the function is executed when the form field loses focus.

example

<script>
          
                   $(document).ready(function(){
                   
                   $("input").blur(function(){$("div").fadeIn(1000);});
                   
                   $("input").focus(function(){$("div").fadeOut(1000);});});
                                     
                   
          </script>

keyboard events

.keydown()

the keydown() method attaches an event handler function to an html element.

the function is executed when the keyboard key is pressed down.

example

                   $(document).ready(function(){
                   
                   $("input").keydown(function(){$("<img>").hide(100);});
                   
                   $("input").keyup(function(){$("<img>").show(100);
                   
                   });

 });

.keyup()

the keyup() method attaches an event handler function to an html element.

the function is executed when the keyboard key is released.

example

                   $(document).ready(function(){
                   
                   $("input").keydown(function(){$("<img>").slideup(100);});
                   
                   $("input").keyup(function(){$("<img>").slidedown(100);
                   
                      });

 });

jquery events methods

look full jquery event reference, please go to our jquery events reference.