In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > data (event)

data property (event)

Browser support:

8	3	9.5

Returns the characters entered in case of the textInput event or the contents of the message for the onmessage event.

Note: The data property is supported in Internet Explorer from version 8, in Firefox from version 3 and in Opera from version 9.5.

For further details, see the pages for the textInput and onmessage events.

Syntax:

object.data;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

String that retrieves the entered characters or the contents of the message.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the data property for textInput events:

<head>
    <script type="text/javascript">
        function Init () {
            var textarea = document.getElementById ("textarea");
            if (textarea.addEventListener) {    // all browsers except IE before version 9
                    // Google Chrome and  Safari
                textarea.addEventListener ("textInput", OnTextInput, false);
                    // Internet Explorer from version 9
                textarea.addEventListener ("textinput", OnTextInput, false);
            }
        }

        function OnTextInput (event) {
            alert ("The following text has been entered: " + event.data);
        }       
    </script>
</head>
<body onload="Init ();">
    Enter or paste some characters into the textarea!
    <textarea id="textarea">Textarea</textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the data property for onmessage events:

Code

message.htm

<head>
    <script type="text/javascript">
        function Init () {
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("message", OnMessage, false);
            }
            else {
                if (window.attachEvent) {   // IE before version 9
                    window.attachEvent("onmessage", OnMessage);
                }
            }
        }

        function GetState () {
            var frame = document.getElementById ("myFrame");
                // send the 'getstate' message to the frame window
            var message = "getstate";
            if (frame.contentWindow.postMessage) {
                frame.contentWindow.postMessage (message, "*");
            }
            else {
                alert ("Your browser does not support the postMessage method!");
            }
        }

        function OnMessage (event) {
            var message = event.data;
            var arr = message.split (",");
            if (arr[0] == "true") {
                alert ("The check box is checked.");
            }
            else {
                alert ("The check box is not checked.");
            }

            var selIndex = Number (arr[1]);
            alert ("The " + (selIndex + 1) + ". option is selected.");
        }
    </script>
</head>
<body onload="Init ();">
    <iframe id="myFrame" src="message.htm" width="500" height="200px"></iframe>
    <br /><br />
    <button onclick="GetState ()">Get the state of controls in the frame</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Message handling example</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function Init () {
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("message", OnMessage, false);
            }
            else {
                if (window.attachEvent) {   // IE before version 9
                    window.attachEvent("onmessage", OnMessage);     // Internet Explorer from version 8
                }
            }
        }

        function OnMessage (event) {
                // Check the location of the caller
            
                // Opera earlier than version 10
            if ('domain' in event) {
                if (event.domain != "help.dottoro.com") {
                    return;
                }
            }
                // Firefox, Safari, Google Chrome, Internet Explorer from version 8 and Opera from version 10
            if ('origin' in event) {
                if (event.origin != "http://help.dottoro.com") {
                    return;
                }
            }
            
            DumpMessageInfo (event);
            
            if (event.data == "getstate") {
                    // create the message
                var checkBox = document.getElementById ("myCheck");
                var select = document.getElementById ("mySelect");
                var message = checkBox.checked + "," + select.selectedIndex;
                
                    // send back the response message
                event.source.postMessage (message, event.origin);
            }
        }
        
        function DumpMessageInfo (event) {
            var info =  document.getElementById ("info");
            info.innerHTML = "message: " + event.data;
                // Opera earlier than version 10
            if ('domain' in event) {
                info.innerHTML += "<br />domain: " + event.domain;
            }
                // Opera earlier than version 10
            if ('uri' in event) {
                info.innerHTML += "<br />url: " + event.uri;
            }
                // Firefox, Safari, Google Chrome, Internet Explorer from version 8 and Opera from version 10
            if ('origin' in event) {
                info.innerHTML += "<br />origin: " + event.origin;
            }
                // Firefox, Safari and Google Chrome
            if ('lastEventId' in event) {
                info.innerHTML += "<br />lastEventId: " + event.lastEventId;
            }
        }

    </script>
<body onload="Init ();" style=background-color:#e0b0a0;>
    <input type="checkbox" id="myCheck" />Sample check box<br />
    <select id="mySelect">
        <option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
    </select>
    <br /><br />
    Information about the message:
    <div id="info" style="background-color:#f0f0b0;"></div>
</body>
</html>