Tutorial

Sign Up

log In

JQuery
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 ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.