Event Data Property in jQuery

 <!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_Data_Property.css">
    <title>Event Data Property</title>
</head>

<body>
    <h1>jQuery Event.data</h1>

    <div id="box">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex velit quod incidunt et adipisci dolores
            blanditiis quaerat ea? Aut nobis voluptatum voluptas, voluptatem officia molestias error? Sit, possimus
            minus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, velit, cum reiciendis dolorem possimus quo
            reprehenderit assumenda ipsam aliquid sequi ratione culpa. Fugiat cum facilis, culpa repudiandae iusto
            dignissimos hic.</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores rem assumenda enim vitae eos quasi
            voluptatem qui impedit possimus, fuga, illo consequatur, est suscipit et sint numquam unde aut ducimus.</p>
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        //jQuery Event Object : Properties & Methods
        // event.pageX,event.pageY,event.type,event.which,event.target,event.preventDefault(),event.isDefaultPrevented(),
        // event.stopPropagation(),event.isPropagationStopped(),event.data()
        $(document).ready(function () {
            $("p").each(function (i) {
                $(this).on("click", { value: i }, function (event) {
                    alert(event.data.value);
                });
            });
        });
    </script>
</body>

</html>




Below File is css/Event_Data_Property.css File.
#box{
    background: #fce2b3;
    height: 300px;
    width: 500px;
    border: 1px solid #ffa500;
    margin-left: 20px;
    padding: 10px;
}





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