---
schema_version: "1"
id: cc5e9a9d92c7a5d69ffdb16c3a3143ed2a493cc916482d2912aa9c2fcf134666
title: Respond to Events
collection: tableau
version: next
locale: en-us
portal_url: https://docs.salesforce.com/tableau/next/en-us/api/js_api/JavaScriptAPI/js_api_sample_respond_to_events.md
canonical_url: https://help.tableau.com/v0.0/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>
```