jQuery Events

Events are occured when user interact with web page. For example, text is entered into an input box, select option in select bar, key is pressed on the keyboard, the mouse pointer is moved, scroll the web page etc.

The click() Method

The click() method attaches an event handler function to an HTML element. The function will be execute when user click on that element.

Example of Code

<style type="text/css"> .example-jquery-event-click{ padding: 20px; font: 20px sans-serif; background: khaki; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".example-jquery-event-click").click(function(){ $(".example-jquery-event-click").slideUp(); }); }); </script> <p class="example-jquery-event-click">Click here.</p> <p class="example-jquery-event-click">Click here.</p>

Output

Click here.
Click here.

The dblclick() Method

The dblclick() method attaches an event handler function to an HTML element. The function will be execute when user double-click on that element.

Example of Code

<style type="text/css"> .example-jquery-event-dblclick{ padding: 20px; font: 20px sans-serif; background: khaki; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".example-jquery-event-dblclick").dblclick(function(){ $(".example-jquery-event-dblclick").hide(); }); }); </script> <p class="example-jquery-event-dblclick">Click here.</p>

Output

Click here.

The hover() Method

The hover() method attaches one or two event handler function to an HTML element. The function will be execute when user mouse pointer enters and leaves the element.

Example of Code

<script type="text/javascript"> $(document).ready(function(){ $(".example-jquery-event-hover").hover(function(){ $(this).css("background-color", "grey"); }, function(){ $(this).css("background-color", "red"); }); }); </script> <p class="example-jquery-event-hover">Mouse-Pointer Here</p>

Output

Mouse-Pointer Here

The mouseenter() Method

The mouseenter() method attaches one or two event handler function to an HTML element. The function will be execute when user mouse enters an element.

Example of Code

<script> $(document).ready(function(){ $(".example-jquery-event-mouseenter").mouseenter(function(){ $(this).css("background-color", "yellow"); }); $(".example-jquery-event-mouseenter").mouseleave(function(){ $(this).css("background-color", "lightgray"); }); }); </script> <p class="example-jquery-event-mouseenter">Mouse-Pointer Here</p>

Output

Mouse-Pointer Here

The keypress() Method

The jQuery keypress() method attach an event handler function to the selected elements (typically form controls) that is executed when the browser receives keyboard input from the user.

Example of Code

Output

The keydown() Method

The jQuery keydown() method attach an event handler function to the selected elements (typically form controls) that is executed when the user first presses a key on the keyboard.

Example of Code

Output

Keydown: 0
Keydown is triggered.

The keyup() Method

The jQuery keyup() method attach an event handler function to the selected elements (typically form controls) that is executed when the user releases a key on the keyboard.

Example of Code

Output

Keyup: 0
Keyup is triggered.

The change() Method

The jQuery change() method attach an event handler function to the <input>, <textarea> and <select> elements that is executed when its value changes.

Example of Code

Output

City:

The focus() Method

The jQuery focus() method attach an event handler function to the selected elements (typically form controls and links) that is executed when it gains focus.

Example of Code

Output

Email: focus fire

The blur() Method

The jQuery blur() method attach an event handler function to the form elements such as input, textarea, select tags that are executed when it loses focus. The following example will display a message when the
text input loses focus.

Example of Code

Output

Email: blur fire

Free Project

Stripe gateway integration demo with PHP

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered