jQuery Events

Post by **C0D3D** »

Run code on document ready event in jQuery

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Ready Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Run code on click event in jQuery

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Click Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Click on me and I'll disappear.</p>
    <p>Click on me and I'll disappear.</p>
    <p>Click on me and I'll disappear.</p>
</body>
</html>

Run code on double-click event in jQuery

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Double-click Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
</head>
<body>
    <p>Double-click on me and I'll disappear.</p>
    <p>Double-click on me and I'll disappear.</p>
    <p>Double-click on me and I'll disappear.</p>
</body>
</html>

Run code on hover event in jQuery

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Hover Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f2f2f2;
    }
    p.highlight{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Place mouse pointer on me.</p>
    <p>Place mouse pointer on me.</p>
    <p>Place mouse pointer on me.</p>
</body>
</html>

Run code on mouseenter event in jQuery

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Mouseenter Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f2f2f2;
    }
    p.highlight{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Place mouse pointer on me.</p>
    <p>Place mouse pointer on me.</p>
    <p>Place mouse pointer on me.</p>
</body>
</html>

Run code on mouseleave event in jQuery

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Mouseleave Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f2f2f2;
    }
    p.highlight{
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>
</head>
<body>
    <p>Place mouse pointer on me.</p>
    <p>Place mouse pointer on me.</p>
    <p>Place mouse pointer on me.</p>
</body>
</html>

Run code on keypress event in jQuery

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keypress Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keypress: <span>0</span></div>
	<div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
    <p>Keypress is triggered.</p>
</body>
</html>

Run code on keydown event in jQuery

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keydown Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keydown: <span>0</span></div>
	<div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
    <p>Keydown is triggered.</p>
</body>
</html>

Run code on keyup event in jQuery

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Keyup Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    div{
        margin: 20px 0;
    }
</style>
<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
</head>
<body>
    <input type="text">
    <div>Keyup: <span>0</span></div>
	<div><strong>Note:</strong> Enter something inside the input box and see the result.</div>
    <p>Keyup is triggered.</p>
</body>
</html>

Run code on change event in jQuery

Example 10

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Change Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>
</head>
<body>
    <form>
        <label>City:</label>
        <select>
            <option>London</option>
            <option>Paris</option>
            <option>New York</option>
        </select>
    </form>
	<p><strong>Note:</strong> Select any value from the dropdown select and see the result.</p>
</body>
</html>

Run code on focus event in jQuery

Example 11

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Focus Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    label{
        display: block;
        margin: 5px 0;
    }
    label span{
        display: none;
    }
</style>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
</head>
<body>
    <form>
        <label>Email: <input type="text"> <span>focus fire</span></label>
        <label>Password: <input type="password"> <span>focus fire</span></label>
        <label><input type="submit" value="Sign In"> <span>focus fire</span></label>
    </form>
    <p><strong>Note:</strong> Click on the form control or press the "Tab" key to set focus.</p>
</body>
</html>

Run code on blur event in jQuery

Example 12

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Blur Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    label{
        display: block;
        margin: 5px 0;
    }
    label span{
        display: none;
    }
</style>
<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
</head>
<body>
    <form>
        <label>Email: <input type="text"> <span>blur fire</span></label>
        <label>Password: <input type="password"> <span>blur fire</span></label>
        <label><input type="submit" value="Sign In"> <span>blur fire</span></label>
    </form>
    <p><strong>Note:</strong> Click away from the form control or press the "Tab" key to remove focus.</p>
</body>
</html>

Run code on submit event in jQuery

Example 13

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Form Submit Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .error{
        color: red;
    }
</style>
<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>
</head>
<body>
    <p><strong>Note:</strong> If try to submit any invalid value. It will produce an error.</p>
    <form action="/examples/html/action.php" method="post" id="users">
        <label for="firstName">First Name:</label>
        <input type="text" name="first-name" id="firstName">
        <input type="submit" value="Submit">
        <div id="result"></div>
    </form>    
</body>
</html>

Run code on resize event in jQuery

Example 14

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Resize Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 20px;
        font: 20px sans-serif;
        background: #f0e68c;
    }
</style>
<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
</head> 
<body>
    <p>Open the output in a new tab and resize the browser window by dragging the corners.</p>
</body>
</html>

Run code on scroll event in jQuery

Example 15

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Executing a Function on Scroll Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        width: 100%;
        padding: 50px 0;
        text-align: center;
        font: bold 34px sans-serif;
        background: #f0e68c;
        position: fixed;
        top: 50px;
        display: none;
    }
    .dummy-content{
        height: 600px;
        font: 34px sans-serif;
        text-align: center;
    }
</style>
<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script> 
</head> 
<body>
    <p>Scroll Happened!</p>
    <div class="dummy-content">Scroll the viewport.</div>
    <div class="dummy-content">Scroll the viewport.</div>
    <div class="dummy-content">Scroll the viewport.</div>
    <div class="dummy-content">Scroll the viewport.</div>
    <div class="dummy-content">Scroll the viewport.</div>
</body>
</html>

jQuery Events

jQuery Events

Who is online