Jquery Events and Interactions

Jquery Events and Interactions

jQuery events are the actions that your web application may detect. They are employed in the creation of dynamic web pages, and an event depicts the precise moment when something occurs.

These are only a few examples of things that have happened.

  • a click of the mouse
  • Submission of an HTML form
  • The loading of a website
  • The action of pressing a key on a keyboard.
  • Scrolling across a website, for example.

The types of these events can be classified as follows:

  • dblclick mouseenter mouseleave click dblclick mouseenter mouseleave click dblclick mouseenter mouselea
  • Events on the Keyboard
  • keyup\skeydown\skeypress
  • When you submit a form, the focus is blurred.
  • Document/Window Events scroll resize load unload
  • With the help of events, we may develop dynamic web sites. Events are actions that your Web Application can detect.

Here are several examples: events −

  • a click of the mouse
  • The loading of a website
  • Using the mouse to move the cursor over an element
  • Using HTML to submit a form
  • A keystroke on a keyboard, for example.

When one of these events is triggered, you can use a custom function to perform pretty much anything with it. Event Handlers are the name for these custom functions.

tying event handlers together

The bind() method of the jQuery Event Model can be used to create event handlers on DOM elements, as shown below.

<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $('div').bind('click', function( event ){ alert('Hi there!'); }); }); </script> <style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on any square below to see the result:</p> <div class = "div" style = "background-color:blue;">ONE</div> <div class = "div" style = "background-color:green;">TWO</div> <div class = "div" style = "background-color:red;">THREE</div> </body> </html>

The division element will respond to the click event as a result of this code; when a user clicks inside this division after that, the alert will appear.