jQuery event.data Property (original) (raw)

Last Updated : 11 Jul, 2025

**jQuery event.data property is used to contain the optional data which is passed to an event method. The data is passed when the currently executing handler is bound.

**Syntax:

event.data

**Parameters:

• **event: It is the parameter that is used to specify the name of the event type on the selector.

**Example 1: The below example illustrates the event.data method in jQuery.

HTML `

<script type="text/javascript">
    $(document).ready(function () {
        $('#ClickMe').on('click', {
            msg: 'GFG says hi to',
            name: 'John Doe'
        }, sayHello);

        $('#ClickMe').on('click', {
            msg: 'GFG says Hi!!'
        }, sayHello);

        $('#ClickMe').on('click', sayHello);

        function sayHello(event) {
            if (event.data == null) {
                alert('No name or msg provided');
            } else {
                alert('Hello ' + event.data.msg +
                    (event.data.name != null ? ' '
                        + event.data.name : ''));
            }
        }
    });
</script>

`

**Output:

**Example 2: In this example, the message will show in the output box when either box is clicked.

HTML `

<script type="text/javascript">
    $(document).ready(function () {
        $('#1').on('click', {
            msg: 'GFG says hi to',
            name: 'John Doe'
        }, sayHello);

        $('#2').on('click', {
            msg: 'GFG says Hi!!'
        }, sayHello);

        $('#1').on('click', sayHello);
        $('#2').on('click', sayHello);

        function sayHello(event) {
            if (event.data == null) {
                alert('No name or msg provided');
            } else {
                $("#output").html('Hello ' + event.data.msg +
                    (event.data.name != null ? ' '
                        + event.data.name : ''));
            }
        }
    });
</script>
<style>
    #output {
        margin: 10px;
        padding: 10px;
        height: 25px;
        width: 300px;
        border: 2px solid green;
        display: block;
    }
</style>

`

**Output: