Introduction To jQuery Events

One of the best features of jQuery is the way it handles events. In jQuery you can code many different types of events that you can not usually available through traditional HTML and JavaScript.

Today we will examine a few of the different events and how they can be used to help make your application more feature rich and your code much cleaner and easier to read and/or modify.

You will be able to see all the examples I talk about today here.

Let’s look at the code we are going to examine:

  <script type="text/javascript">
   $(document).ready(function() {
    // Move the mouse
    $("#mouse_move").mousemove(function(event) {
     alert('You moved the mouse over this area');
    });
   $("#mouse_click").click(function(event) {
    alert('Click');
    });
   $("#text_functions").keypress(function(event) {
    alert('You Pressed a Key');
   });
   $("#text_functions").keydown(function(event) {
    alert('You Pressed a key down');
   });
   $("#text_functions").keyup(function(event) {
    alert('The key went back up');
   });
  });
 </script>

mousemove – The event will fire when the mouse enters the DOM object.
mouseclick – The event will fire when the mouse is clicked within the DOM object
keypress – The event will fire when a key is pressed within the DOM object
keydown – The event will fire when a key is pushed down with in the DOM object
keyup – The event will fire when a key is on the way up with in the DOM object.

The example may seem incredibly simplistic, but you can use this information to create nearly any web application.

Leave a Reply

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