WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Events

Previous Next

What Are jQuery Events?

Events are actions that happen in the browser — like when a user clicks a button, hovers over text, types into a form, or when a page finishes loading.

jQuery makes it super easy to detect and respond to these events using simple methods.

Mouse Event

Eeyboard Event

Form Event

click()

keydown()

focus()

dblclick()

keypress()

blur()

mouseenter()

keyup()

change()

mouseleave()


submit()

mousedown()



mouseup()



hover()



Mouse Event


These trigger when the user interacts with the mouse.


1) click() Event


Fires when an element is clicked

Example
<script>
$(document).ready(function(){
$("div~p").click(function() {
$(this).css("background-color", "green");
});
});
</script>
Try it yourself

2) dblclick() Event


Fires when an element is double-clicked

Example
<script>
$(document).ready(function(){
$(".hideEvent").dblclick(function(){
$(this).hide();
});

});
</script>
Try it yourself

3) mouseenter() Event


Fires when the mouse enters an element

Example
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
Try it yourself

4) mouseleave() Event


Fires when the mouse leaves an element

Example
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
Try it yourself

5) mouseup() Event


When mouse button is pressed down

Example
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
});
</script>
Try it yourself

6) mousedown() Event



When mouse button is released

Example
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
});
</script>
Try it yourself

7)  hover() Event


Shortcut for mouseenter + mouseleave

Example
<script>
$(document).ready(function(){
$("#box").hover(
function() { $(this).css("background", "lightblue"); },
function() { $(this).css("background", "white"); }
);
});
</script>
Try it yourself

Keyboards Event


1) keydown() Event


Fires when a key is released

Example
<script>
$(document).ready(function(){
$("input").keydown(function() {
alert("Key down");
});
});
</script>
Try it yourself

2) keyup() Event


Fires when a key is pressed down

Example
<script>
$(document).ready(function(){
$("input").keyup(function() {
alert("Key Up");
});
});
</script>
Try it yourself

3) keypress() Event


The keypress event in jQuery is triggered when the user presses a key on the keyboard. It works primarily for character keys (like letters and numbers), but does not detect non-character keys (like Shift, Esc, or Arrow keys).

Example
<script>
$(document).ready(function(){
$("input").keypress(function() {
alert("Key Press");
});
});
</script>
Try it yourself

Form Events


1) focus() Event


Fires when an element gains focus

Example
<script>
$(document).ready(function(){
$("#inputBox").focus(function(){
$("span").css("display", "inline").fadeOut(3000);
});
});
</script>
Try it yourself

2) blur() Event


Fires when an element loses focus

Example
<script>
$(document).ready(function(){
$("#inputBox").blur(function(){
$("span").css("display", "inline").fadeOut(3000);
});
});
</script>
Try it yourself

3) change() Event


Fires when the value of an element changes

Example
<script>
$(document).ready(function(){
$("#inputBox").change(function(){
$("span").css("display", "inline").fadeOut(3000);
});
});
</script>
Try it yourself

4) submit() Event



Fires when a form is submitted

Example
<script>
$(document).ready(function(){
$("#myForm").submit(function(event){
event.preventDefault(); // prevent page reload
alert("Form submitted!");
})
});
</script>
Try it yourself

Previous Next