files/en-us/web/api/htmltrackelement/cuechange_event/index.md
{{APIRef("WebVTT")}}
The cuechange event fires when a {{domxref("TextTrack")}} has changed the currently displaying cues. The event is fired on both the TextTrack and the {{domxref("HTMLTrackElement")}} in which it's being presented, if any.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("cuechange", (event) => { })
oncuechange = (event) => { }
A generic {{DOMxRef("Event")}} with no added properties.
The underlying {{domxref("TextTrack")}}, indicated by the {{domxref("HTMLTrackElement.track", "track")}} property, receives a cuechange event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.
If the track is associated with a media element, using the {{HTMLElement("track")}} element as a child of the {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, the cuechange event is also sent to the {{domxref("HTMLTrackElement")}}.
let textTrackElem = document.getElementById("text-track");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
Alternatively, you can use the oncuechange event handler:
let textTrackElem = document.getElementById("text-track");
textTrackElem.oncuechange = (event) => {
let cues = event.target.track.activeCues;
};
{{Specifications}}
{{Compat}}