Event class

stream.addEventListener("streamPropertyChanged", streamPropertyChangedHandler);

function streamPropertyChangedHandler(event) {
	alert("Properties changed for stream " + event.target.streamId);
}

See

ConnectionEvent

DeviceEvent

DeviceStatusEvent

ExceptionEvent

Publisher.addEventListener()

Publisher events

ResizeEvent

SessionConnectEvent

SessionDisconnectEvent

SignalEvent

StreamEvent

Event properties

The Event object has the following properties:

cancelable (Boolean) — Whether the event has a default behavior that is cancelable (true) or not (false). You can cancel the default behavior by calling the preventDefault() method of the Event object in the event listener function. (See preventDefault().)

target (Object) — The object that dispatched the event.

type (String) — The type of event.

isDefaultPrevented():Boolean

Whether the default event behavior has been prevented via a call to preventDefault() (true) or not (false). See preventDefault().

preventDefault()

Prevents the default behavior associated with the event from taking place.

To see whether an event has a default behavior, check the cancelable property of the event object.

Call the preventDefault() method in the event listener function for the event.

Currently, the following events have default behaviors:

• closeButtonClick — This event object is defined by the Event class. A DevicePanel object dispatches this event when the user clicks the device panel's close button. The default behavior is to remove the device panel (associated with the close button) from the HTML page. Calling the preventDefault() method in the event listener cancels the default behavior (and leaves the device panel displayed). See DeviceManager.removePanel() and DevicePanel.addEventListener().
• sessionDisconnect — See SessionDisconnectEvent.preventDefault().
• settingsButtonClick — This event object is defined by the Event class. A Publisher object dispatches this event when the user clicks the publisher's settings button. The default behavior is to display the device panel in the center of the HTML page. Calling the preventDefault() method in the event listener cancels the default behavior. You can then display a device panel in another location on the page by calling the displayPanel() method of a DisplayManager object. See DeviceManager.displayPanel() and Publisher.addEventListener().
• streamDestroyed — See StreamEvent.preventDefault().

Example

The following code shows how to add an event listener for the settingsButtonClick event. This event listener calls the preventDefault() method of the Event object. This method cancels the default behavior, which is to display the device panel in the center of the HTML page. The code then adds a device panel by calling the displayPanel() method of a DeviceManager object.

var API_KEY = ""; // Replace with your API key. See https://dashboard.tokbox.com/projects
var sessionId = ""; // Replace with your own session ID.
                    // See https://dashboard.tokbox.com/projects
var token = ""; // Replace with a generated token that has been assigned the moderator role.
                // See https://dashboard.tokbox.com/projects

session = TB.initSession(sessionId);
session.addEventListener('sessionConnected', sessionConnectedHandler);
session.connect(API_KEY, token);

function sessionConnectedHandler(event) {
    var parentDiv = document.getElementById('publisherContainer');
    var div = document.createElement('div');
    div.setAttribute('id', 'opentok_publisher');
    parentDiv.appendChild(div);
    publisher = TB.initPublisher(API_KEY, 'opentok_publisher');
    session.publish(publisher);
    publisher.addEventListener('settingsButtonClick', settingsButtonClickHandler);
}

function settingsButtonClickHandler(event) {
    event.preventDefault();
    
    var newDiv = document.createElement('div');
    newDiv.id = 'devicePanel';
    document.getElementById('devicePanelContainer').appendChild(newDiv);

    deviceManager = TB.initDeviceManager(API_KEY);
    devicePanel = deviceManager.displayPanel('devicePanel', publisher);
}

Note that this example assumes that the HTML DOM contains DIV elements named "publisherContainer" and "devicePanelContainer".