Events in jQuery:

By using events we can make our web page dynamic so we can say that event is an integral part of our programming language to make our site or web page more dynamic.

Events are nothing but the action perform by a user on the web application that can be detected by your web application.

Following are such examples of events that is perform by a user on web application:

  • Loading a web page
  • Submitting a Form
  • Mouse click on a HTML element
  • Mouse over on a HTML element
  • Selecting radio button
  • Selecting checkboxes etc.

Syntax for Event Method:

Basic syntax is like this:

$(selector).eventname();

If you want to assign an event to direct a HTML element you have to write like this:

$(“p”).click();

The above statement performs the “click” event and it will assign to all paragraph element on your application.

But what will do when click event occurs so you have to define a function which tell what should perform when click event is occurs.

$(“p”).click(function(){

//function coding goes here!

})

Commonly used Event Methods:

Here is a list of some Event Methods.

  • $(document).ready();
  • click()
  • dblclick()
  • mouseenter()
  • mouseleave()
  • mousedown()
  • mouseup()
  • hover()
  • focus()
  • blur()

Document Ready Event:

It is a good practice to wait for working with a document that is going to be fully loaded means you have to wait for a moment to load that code or programme and than work with it.

The document ready event is used for it. For this we use “$(document).ready()” method. This method allows us to run or execute a function when the document is fully loaded.

We use this event in all our jQuery programming or coding.

Below are some examples that can fail if method executes before the document is fully loaded.

  • Like we are trying to hide an element which doesn’t exist.
  • Like we are trying to get the size of an image which is not loaded yet

 click():

The click() event occurs when user click on a HTML element like a button, or a paragraph can also be clicked.

Example:

In following example when click() event fires than all paragraph elements will hide.

dblclick():

The dblclick() event occurs when user double click on a HTML element like a button.

Example:

In following example when dblclick() event fires than all heading elements will hide.

mouseentere():

The mouseenter() event occurs when user enter the mouse over a HTML element.

Example:

mouseleave():

The mouseleave() event occurs when user leaves the mouse from a HTML element.

Example:

mousedown():

The mousedown() event occurs when mouse is over the HTML element and the left mouse button is pressed.

Example:

mouseup():

The mouseup() event occurs when mouse is over the HTML element and the left mouse button is released.

Example:

hover():

The hover() event is a combination of mouseenter() and mouseleave() events.

The first event occurs when the mouse enters the HTML element and the second event occurs when mouse released from HTML element.

Example:

focus():

The focus() event method is used on HTML “form” field. This event occurs when form field gets the focus.

Example:

blur():

The blur() event method is used on HTML “form” field. This event occurs when form field loos the focus.

Example:

 

Leave a Reply

Your email address will not be published. Required fields are marked *