jQuery Tutorials
jQuery Introduction
jQuery Get Started
jQuery Syntax
jQuery Selectors
jQuery Events
jQuery Effects
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining
jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery Traversing
jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering
jQuery AJAX
jQuery AJAX Intro
jQuery Load
jQuery Get/Post
jQuery Misc
jQuery noConflict()
jQuery Filters
Previous
jQuery Event Methods
JQuery is well-designed to respond to events on an HTML page.
What are Events?
All the actions of different visitors that the web page can respond to are called events.
An event represents the exact time when something happens.
Examples
- moving a mouse over an element
- selecting a radio button
- clicking on an element
The word "fires / fire" is often used with events. Example: "A key press event is off, when you press a key".
Here are some common DOM events:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
jQuery Syntax For Event Methods
In jQuery, most DOM events have the same jQuery method.
To provide a click-through event for all categories on the page, you can:
The next step is to define what should happen when an event is burning. You must transfer work to the event:
// action goes here!!
});
Commonly Used jQuery Event Methods
$(document).ready()
The $(document).ready() method allows us to do the job once the document is fully loaded. This event has already been described in the jQuery Syntax chapter.
click()
The click() method pastes the event host function into the HTML component.
Task is performed when the user clicks on the HTML object.
The following example is: If a click event burns in the <p> element; hide <p> current section:
Example
$(this).hide();
});
dblclick()
The dblclick() method attaches the event host function to the HTML component.
Task performed when user double-clicks HTML object:
Example
$(this).hide();
});
mouseenter()
The mouseenter() method attaches an event host function to the HTML component.
Task performed when mouse cursor enters HTML object:
Example
alert("You entered p1!");
});
mouseleave()
The mouseleave() method attaches the event host function to the HTML component.
Task performed when mouse cursor leaves HTML element:
Example
alert("Bye! You now leave p1!");
});
mousedown()
Mousedown() method attaches the event host function to the HTML component.
The function is performed, when the left, middle or right mouse button is pressed down, while the mouse over the HTML element:
Example
alert("Mouse down over p1!");
});
mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:
Example
alert("Mouse up over p1!");
});
hover()
The hover() method takes two functions and is a combination of mouseenter () and mouseleave() methods.
The first function is performed when the mouse enters the HTML component, and the second function is performed when the mouse leaves the HTML element:
Example
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
The focus() method attaches an event host function to an HTML form.
Work is done when the form field focuses on:
Example
$(this).css("background-color", "#cccccc");
});
blur()
The blur() method attaches the event host function to the HTML form.
Work performed when form field loses focus:
Example
$(this).css("background-color", "#ffffff");
});
The on() Method
The on() method attaches one or more event holders to selected elements.
Paste a click-through event in the <p> section:
Example
$(this).hide();
});
Attach multiple event handlers to the <p> section:
Example
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});