Top 3 Products & Services

1. 2. 3.

---

Dated: Dec. 21, 2012

Related Categories

JavaScript Programming

Events

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:

BLUR
- when an element loses focus

FOCUS
- when an element gets focus

FOCUSIN
- when a child element gets focus

FOCUSOUT
- when a child element loses focus

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

RESIZE
- when a window object changes size

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

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

CLICK
- when the element is clicked

DBLCLICK
- when the element is double clicked

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

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

MOUSEMOVE
- when the cursor is moving inside the element

MOUSEOVER
- when the passes over the element

MOUSEOUT
- when the cursor leaves the element field

MOUSEENTER
- when the cursor enters the element field

MOUSELEAVE
- same as mouseout

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

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

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

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

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

KEYUP
- 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

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

 

.BIND()
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');     });

 

.LIVE()
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');    });

 

.ONE()
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'

 

.DIE()
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()...)

 

.READY()
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 });

 

 

 

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