On and Off Method tutorial in jQuery

 <!DOCTYPE html>

<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On and Off Method jQuery</title>
<style>
    body {
        font-family: arial
    }

    #box {
        padding: 10px;
        border: 1px solid #000;
    }

    .boxbg {
        background: pink;
    }
</style>

<body>
    <h1>jQuery On() Methods</h1>
    <div id="box">
        <h2>Test Box</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat quisquam quas error culpa amet doloremque
            porro eum non. Ex tempora expedita officia minus temporibus, animi earum et odit corporis placeat!</p>
    </div>
    <br>
    <button>Remove Event</button>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            //Below is only one event and one function
            $("#box").on("click", function () {
                $(this).css("background", "orange");
            });

            //Below is multiple events and same one function
            $("#box").on("mouseover mouseout", function () {
                $(this).toggleClass("boxbg");
            });

            //Main Use of "On()" method is as shown below :
            //Below is multiple events and multiple functions
            $("#box").on({
                "click": function () {
                    $(this).css("background", "orange");
                },
                "mouseover": function () {
                    $(this).css("background", "pink");
                },
                "mouseout": function () {
                    $(this).css("background", "lightblue");
                }
            });

            //"off()" method is used to remove events
            //Here below, we have removed "mouseover" and "mouseout" events of selector "box"
            $("button").click(function () {
                $("#box").off("mouseover mouseout");
            });
        });
    </script>
</body>

</html>





Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < link rel = "stylesheet" href = "css/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more