Top 3 Products & Services


Dated: Dec. 21, 2012

Related Categories

JavaScript Programming


These methods are used for registering user actions in a browser and acting after the same ones, and also as a way to manipulate registered actions.

jQuery supports the following events:

- when an element loses focus

- when an element gets focus

- when a child element gets focus

- when a child element loses focus

- when an element is completely loaded (supported elements: img, script, frame, iframe, window)

- when a window object changes size

- when the user moves his scroller (works on a window object but also on all elements that have CSS overflow turned on)

- is linked to the window element and is triggered when the user leaves the page

- when the element is clicked

- when the element is double clicked

- when the cursor is above the element and the left mouse button is pressed

- when the cursor is above the element and the left mouse button is released

- when the cursor is moving inside the element

- when the passes over the element

- when the cursor leaves the element field

- when the cursor enters the element field

- same as mouseout

- when the value of the element is changed (supported elements: input, textarea, select)

- when a user selects a text inside the element (supported elements: input i textarea)

- when a user tries to send a form (supports only form element)

- when the user presses any key on the keyboard. It can be linked to any element, but that elements must be in focus

- same as keydown, only it doesn’t register auxiliary keys (shift, ctrl, alt...)

- when a user presses and releases any button on the keyboard. It can be linked to any element, but that element must be in focus

- when elements, like pictures, don’t load properly


Binds a function to execute a certain element in reaction to an action that the user made.

$('#myElement').bind('click', function(){        alert('User clicked on button');     });


Does the same as the .bind() method , only it connects events to all elements added in the future. For example, if we link a certain event that has the class my class, and will later add a second element with the same class, .bind() element will not give him that event, but .live() will.

 $('#myElement').bind('click', function() {       alert('User clicked on button');    });


Links a certain event to an element that will be executed only once.

 /* the function will be executed only after the first click.   After every next click nothing will happen */       $('#myElement').one('click', function() {    alert('User clicked on button'


Removes all or a certain event from an element. It can also delete a certain function that has been assigned to an element through a event.

// removes all events    $('#myElement').die();      // removes all click events    $('#myElement').die('click');      // removes acertain function that has been previously assigned on a click event    $('#myElement').die('click', someFunction);


All above mentioned events can be used with .bind(), .live(), .one() and .die() methods or as independent methods (example: .click(), .focus()...)


Starts when DOM is completely loaded. Always use this method when you are starting your functions. It links exclusively on a document object.

 $(document).ready(function() {       // your functions are called here });


jQuery Events



This was the fourth part of the lesson about jQuery read the next part of the jQuery tutorial in Monday.

And other parts can be found here:

- First part of the jQuery tutorial

- Second part of the jQuery tutorial

- Third part of the jQuery tutorial



Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!

Previous Article

Next Article