Events in jQuery

Posted on Updated on

Events in jQuery :

When any user visit on the web page he/she select click or move the mouse over the window this kind of action are known as event. Event is occur when any user click , move mouse etc. they can handle by the event handler with help of jquery. And perform some action on the event occur the action is depend on the coding or a developer what he/she want to do.

Now let see some example in real daily life using events:

Take a example of most popular social site facebook there are we click on notification it show the window with all notification is the click event and mouse hover where video is play when mouse on it etc.

Some events:

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave   blur unload

We know the all event but the next question what is the syntax for work with event?

In jquery with help of selectors select the element ( tag ) and apply event on the tag and make a function which we want to perform.

Now let see the syntax :

$( “ tag id or class “ ).event (function(){

Function coding here///

});

Now let clear the event with one easy example:

< !doctype html >

< html >

< head >

< script src = “ jquexry.js “ type = “ text/javascript “ >

< title > My First Event < /title >

< /head >

< body >

< h1 > Press the button and see the event occur: < /h1 >

< input type = “ button “ name = “ clickme “ value = “ Click me ! “ id = “ clickme “ / >

< script >

$( “ #clickme “ ).click(function(){

Alert( “ hi dear I am event and occur when you click me “ );

});

< /script >

< /body >

< /html >

This alert pop up show when we click on the button, Now let see the double click button in this event is occur when we double click the button Use the key dblclick.

< !DOCTYPE html >

< html >

< head >

< script src = “ https://ajax.goog leapi s.com/a jax/lib s/jq uery/1.1 1.3/jq uery.m in.js “ > </script >

< script >

$(document).ready(function(){

$( “ p “ ).dblclick(function(){

$(this).hide();

});

});

< /script >

< /head >

< body >

< p > I ll appear when you double click the button < /p >

< p > Click me away! < /p >

< p > Click me too! < /p >

< /body >

< /html >

Mouse enter:

This event is happen when mouse is enter on selected element and it perform the function. This is most over use in image when enter the mouse on the image it zoom in when mouse out it zoom out.

Let see the example:

< !DOCTYPE html >

< html >

< head >

< script src = “ https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js “ > < /script>

< script >

$(document).ready(function(){

$( “ #p1 “ ).mouseenter(function(){

alert( “ You entered p1! “ );

});

});

< /script >

< /head >

< body >

< p id = “ p1 “ > Enter this paragraph. < /p >

< /body >

< /html >

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s