Event Namespace in Jquery

• Jquery provides custom events using namespace.

• A Event Callback method can be attached with a custom event  to a HTML element.

• A namespace can be created and used to a event using dot operator.

• In this Demo,“We will attach a click event with namespace for all the LI elements inside a Un-Ordered List”.

• Below code shows a namespace ‘StudentName‘ attached to click event for LI element followed by a css color change to red.

$('.student-container li').on('click.StudentName', function (e) {
    console.log(e.handleObj)
    $(this).css('color', 'red');
});

• The HTML markup used for this demo is as below:-

<ul class='student-container'>
    <li>Sandeep</li>
    <li>Jack</li>
    <li>Jill</li>
    <li>Smith</li>
</ul>

• Check the below fiddle for output:-

• Below Screenshot shows the console log for ‘handleObj‘ property of ‘event‘.