Friday, May 12, 2017

jQuery Events


To using the event, we can create dynamic web pages. The event is an action that is detected by the web application.

Following are the common DOM events:

Mouse Events
click
dblclick
mouseenter
mouseleave


Keyboard Events
keypress
keydown
keyup

Form Events
submit
change
focus
blur

Document/Window Events
load
resize
scroll
unload

  
The click Event

Click event fire when an HTML element clicked. It will trigger click event.
  
Syntax:
$(selector).click()

//Attack function in click event
$(selector).click(function)

Example:
$("h1").click(function(){
    alert("This is your heading tag.");

});

The dblclick Event

This event occurs when a double click is done on HTML element.

Syntax:
$(selector).dblclick ()

//Attack function in dblclick event
$(selector). dblclick(function)

Example:
$("input"). dblclick(function(){
    alert("This is a double click event.");
});

The mouseenter Event

This event occurs when the mouse pointer is entering the selected element.

Syntax:
$(selector).mouseenter ()

//Attack function in mouseenter event
$(selector). mouseenter (function)

Example:
$("input"). mouseenter (function(){
    alert("This is mouse enter event.");
});


The mouseleave Event

This event occurs when the mouse pointer leaves the selected element.

Syntax:
$(selector).mouseleave()

//Attack function in mouseleave event
$(selector).mouseleave(function)

Example:
$("input").mouseleave(function(){
    alert("This is mouse leave event.");
});

The keypress Event

This event occurs when the button is pressed. Keypress event is similar to key down event. Hence keypress event is not fired for all key like ALT, CTRL, SHIFT, ESC.

Syntax:
$(selector).keypress()

//Attack function in keypress event
$(selector). keypress (function)

Example:
$("input").keypress(function(){
    alert("This is key press event.");
});

The keydown Event

This event occurs when the keyboard key is pressed. Using the event.which method we can get which key is pressed.

Syntax:
$(selector). keydown ()

//Attack function in key down event
$(selector). keydown (function)

Example:
$("input"). keydown (function(){
    alert("This is key down event.");
});

The keyup Event

This event occurs when the keyboard key is released. Using the event.which method we can get which key is pressed.

Syntax:
$(selector). keyup()

//Attack function in key up event
$(selector).keyup (function)

Example:
$("input").keyup(function(){
    alert("This is key up event.");
});

The submit Event

This event occurs when a form is submitted. This event is used to place on <form> element.

Syntax:
$(selector). submit ()

//Attack function in submit event
$(selector). submit (function)

Example:
$("form"). submit(function(){
    alert("This is submit event.");

});

No comments:

Post a Comment