Quick Contact

    jQuery Events

    Introduction

    Whenever a user interacts with the a website page, events are frequently triggered, including when a link as well as button is clicked, text is introduced into an input box or textarea, a selection is chosen in a select box, a key is pressed on the keyboard, the mouse pointer is moved, and so on. In some cases, including the loading the page and unload events, the Browser can initiate the events.

    What are Events?

    jQuery extends the basic event-handling mechanisms by providing event techniques for most native web browsing events, such as ready(), click(), keypress(), focus(), blur(), change(), and so on. For example, to run some JavaScript code whenever the DOM is fully prepared, use the jQueryready() method, as shown below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function when Document is Ready in jQuery< /title>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        // Code to be executed
    alert("Ducat India");
    });
    < /script>
    < /head>
    < body>
    < !--Put Content here-->
    < /body>
    < /html>
    

    NOTE:

    The $(document).ready() event is utilized to safely modify a website with jQuery. This event’s code would only perform whenever the page’s DOM is prepared, i.e. whenever the document is prepared to be exploited.

    In general, the events can be categorized into four main groups —

    • mouse events,
    • keyboard events,
    • form events
    • document/window events.

    Mouse Events

    Whenever a user clicks an element or moves the mouse pointer, a mouse event is triggered. Here are some common jQuery methods for handling mouse events.

    The click() Method

    The jQueryclick() method adds an iterator function to the components that have been selected for the “click” event. Whenever the customers click on that component, the connected function is called. When the < p> elements on a site are clicked, the following example hides them.

    Example

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

    Output


    Click here to disappear.

    Click here to disappear.

    Click here to disappear.

    The dblclick() Method

    The jQuerydblclick() method adds an object containing function to the components that have been selected for the “dblclick” event. Whenever the user double-clicks on that element, the connected function is called. When the

    components are double-clicked, the following example hides them.

    Example

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

    Output


    Double-Click here to disappear.

    Double-Click here to disappear.

    Double-Click here to disappear.

    The hover() Method

    The hover() method of jQuery attaches one or two event handler operations to the selected components, which are implemented whenever the mouse pointer approaches and leaves the elements. Whenever the user moves the mouse pointer across a component, the first function is called, and the second function is called when the user moves the mouse pointer away from that element.

    The following example highlights

    elements when the cursor is placed over them; the highlighting is removed when the cursor is removed.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Hover Event in jQuery< /title>
    < scriptsrc="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 here to highlight background.< /p>
    < p>Place mouse pointer here to highlight background.< /p>
    < p>Place mouse pointer here to highlight background.< /p>
    < /body>
    < /html>
    

    The mouseenter() Method

    Whenever the mouse reaches an element, the jQuerymouseenter() method attaches an iterator function which is accomplished.

    Keyboard Events

    Whenever the user presses or releases a key on the keyboard, a keyboard event is triggered. Here are some commonly used jQuery methods for handling keyboard events.

    The keypress() Method

    Whenever the web application expects to receive keyboard input from the user, the jQuerykeypress() method attaches an event handler feature to the various components (typically form controls). Whenever the kypress incident is dismissed depending on how many times it is fired when users press a key on the keyboard, the following example will display a message.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Keypress Event in jQuery< /title>
    < scriptsrc="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(){
    vari = 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>
    

    Output

    The keydown() Method

    Whenever the user initially needs to press a keys on the keyboard, the jQuerykeydown() method attaches an event handler feature to the individual elements (typically form controls). Whenever the keydown event is fired depending on how many times it really is fired when you press a key on the keyboard, the following example will display a message.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Keydown Event in jQuery< /title>
    < scriptsrc="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(){
    vari = 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>
    

    Output

    The keyup() Method

    Whenever the user generates a key from the keyboard, the jQuerykeyup() method attaches an object containing function towards the selected samples (typically form controls). Once you click and start releasing a key on the keyboard, the keyup event is fired and the number of times it is fired is displayed in the following example.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Keyup Event in jQuery< /title>
    < scriptsrc="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(){
    vari = 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>
    

    Output

    Form Events

    A form event is triggered when a making its way gains or loses focus, or when the user modifies a form controller output, such as by typing text into a text input or selecting any alternative in a select box. Here are some commonly used jQuery methods for handling form events.

    The change() Method

    Whenever the value of an input, textarea, or select attribute changes, the jQuerychange() method attaches an object containing feature which is executed. When you can choose any alternative in the navigation bar select box, the following example will display an alert message.

    Example

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

    Output

    The focus() Method

    Whenever an identified element (typically form controls and links) increases concentrate, the jQueryfocus() technique attaches an event handler feature that is implemented. When the text input receives focus, the following example will provide a message.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Focus Event in jQuery< /title>
    < scriptsrc="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>
    

    Output

    The blur() Method

    The jQuery blur() technique adds an object containing feature to form elements like input, textarea, and select that is implemented when the method attribute disappears entirely. Whenever the text input loses momentum, the following example will a message be displayed.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Blur Event in jQuery< /title>
    < scriptsrc="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>
    

    Output

    The submit() Method

    Whenever a user attempts to submit an application, the jQuerysubmit() method attaches an event handler feature to the < form> elements, which is implemented. When users try to submit the form, the following example will display a message based on the value you enter.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Form Submit Event in jQuery< /title>
    < scriptsrc="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]+$/;
    varcurrentValue = $("#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>
    

    Output

    Document/Window Events

    Whenever the page’s DOM (Document Object Model) is available, or when the user resizes or inscriptions the browser window, for example, events are triggered. Here are some common jQuery methods for dealing with such events.

    The ready() Method

    The jQueryready() method specifies a function to be executed when the DOM is completely filled.

    The following example would then consider replacing the part of the sentence text once the DOM hierarchy has already been with further and is mentally prepared to be exploited.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Ready Event in jQuery< /title>
    < scriptsrc="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>
    

    The resize() Method

    Whenever the size of a browser window modifications, the jQueryresize() method attaches an event handler feature to the window component, which is implemented.

    When you try to resize the web browser by dragging its corners, the following example will display the current width and height.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Resize Event in jQuery< /title>
    < scriptsrc="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>
    

    The scroll() Method

    Whenever the scroll position of an attribute alteration, the jQueryscroll() method attaches an event handler component to the window or scrollable dynamic content and elements, which is implemented.

    Once users scroll the browser window, the following example will show a message.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Executing a Function on Scroll Event in jQuery< /title>
    < scriptsrc="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>
    

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.