Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jquery event.target

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 332
    Comment on it

    Hello Readers,


    Definition: The DOM(Document Object Model) element that initiated the event. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling.


    The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.


    Syntax: event.target

    Examples 1: Display the tag's name on click event.

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Demo event.target</title>
    <style type="text/css">
    .event-span, .event-strong, .event-p { padding: 8px; display: block; border: 1px solid #999; }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
    <div class="set">
        <div id="log"></div>
        <div>
            <p class="event-p"><strong class="event-strong"><span class="event-span">Click Here</span></strong></p>
        </div>
    </div>
    <script type="text/javascript">
    $( ".set" ).click(function( event ) {
        $( "#log" ).html( "clicked: " + event.target.nodeName );
    });
    </script>
    </body>
    </html>
    


    Examples 2: Display the background color on click event.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $( "ul" ).click(function( event ) {
            var target = $( event.target );
            if ( target.is( "li" ) ) {
                target.css( "background-color", "#c00" );
            }
        });
    });
    </script>
    </head>
    <body>
    <ul>
        <li>list item 1 - tag</li>
        <li>list item 2 - tag</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    </body>
    </html>
    


    Thanks


 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: