jQuery event.namespace Property

Last Updated : 11 Jul, 2025

The jQuery event.namespace property is used to return the custom namespace whenever the event is triggered. It is used to handle tasks differently depending on the namespace used.

Syntax:

event.namespace

Parameters: This property contains single parameter event which is required. It returns the custom namespace and it comes from the event binding function.

Example 1: This example uses event.namespace property to return and remove namespace.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery event.namespace Property
    </title>
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <!-- Script to use event.namespace property -->
    <script>
        $(document).ready(function () {
            $("h3").on("custom.someNamespace", function (event) {
                alert(event.namespace);
            });

            $("h3").click(function (event) {
                $(this).trigger("custom.someNamespace");
            });

            $("button").click(function () {
                $("h3").off("custom.someNamespace");
            });
        });
    </script>
</head>

<body>
    <center>
        <h1>Welcome to GeeksforGeeks!.</h1>
        <div style="background-color:green">
            <h3> Click here Geeks for Geeks.</h3>
            <button>Remove namespace</button>
        </div>
    </center>
</body>

</html>

Output:

Example 2: This example uses click.mySomething namespace to slideToggle the content.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        jQuery event.namespace Property
    </title>
    <script src=
"http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <!-- Script to use event.namespace to
        slideToggle content -->
    <script>
        $(document).ready(function () {
            $("h3").on("click.mySomething", function () {
                $(this).slideToggle();
            });

            $("button").click(function () {
                $("h3").off("click.mySomething");
            });
        });
    </script>
</head>

<body>
    <center>
        <h1>Welcome to GeeksforGeeks!.</h1>
        <div style="background-color:green">
            <h3>1st statement : Geeks for Geeks.</h3>
            <h3>2nd statement : Mathematics</h3>
            <button>Click to remove namespace</button>
        </div>
    </center>
</body>

</html>