---
schema_version: "1"
id: 284eb5dea8e99c8f9d2047a87d6ab630a1b609e1c501f5bd28a37c14f6f911a5
title: Respond to Events
collection: tableau
version: current
locale: en-us
portal_url: https://docs.salesforce.com/tableau/current/en-us/api/js_api/JavaScriptAPI/js_api_sample_respond_to_events.md
canonical_url: https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_sample_respond_to_events.htm
source_site: help.tableau.com
content_type: documentation
content_hash: 43627c5a2c7209ddf7f11a89ca28fba2befca4ff8bb2e0f1995f86293d0dc6b0
description: Important changes for the Tableau JavaScript API
---
[Skip to main content](#main-content)

# Respond to Events

**Important changes for the Tableau JavaScript API**

As of February 2024, the Tableau JavaScript API is deprecated. Use the Embedding API v3 instead for embedding interactive views into web pages and applications. For guidance on embedding Tableau views, see the [Tableau Embedding API v3 Help](https://help.tableau.com/current/api/embedding_api/en-us/index.html).

Display information about marks as you select them.

  

Information about selected marks displays here.

  

* * *

  

```
<!DOCTYPE html>
<html>

<head>
    <title>Respond to Events</title>

    <script type="text/javascript"
	    src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

    <script type="text/javascript">
        var viz;

        function initViz() {
            var containerDiv = document.getElementById("vizContainer"),
                url = "http://public.tableau.com/views/RegionalSampleWorkbook/College",
                options = {
                    "Academic Year": "",
                    hideTabs: true,
                    onFirstInteractive: function () {
                        listenToMarksSelection();
                    }
                };

            viz = new tableau.Viz(containerDiv, url, options);
        }

        function listenToMarksSelection() {
            viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
        }

        function onMarksSelection(marksEvent) {
            return marksEvent.getMarksAsync().then(reportSelectedMarks);
        }

        function reportSelectedMarks(marks) {
            var html = "";

            for (var markIndex = 0; markIndex < marks.length; markIndex++) {
                var pairs = marks[markIndex].getPairs();
                html += "<b>Mark " + markIndex + ":</b><ul>";

                for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
                    var pair = pairs[pairIndex];
                    html += "<li><b>Field Name:</b> " + pair.fieldName;
                    html += "<br/><b>Value:</b> " + pair.formattedValue + "</li>";
                }

                html += "</ul>";
            }

            var infoDiv = document.getElementById('markDetails');
            infoDiv.innerHTML = html;
        }
    </script>
</head>

<body onload="initViz();">
    <div id="vizContainer"></div>
    <br>
    <div id="markDetails">Information about selected marks displays here.</div>
</body>

</html>
```