> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

> CometChat Calling SDK v5 - Events for JavaScript

Handle call session events to build responsive UIs. The SDK provides event listeners to monitor session status, participant activities, media changes, button clicks, and layout changes.

## Adding Event Listeners

Use the `addEventListener()` method to register event listeners. The method returns an unsubscribe function that you should call to remove the listener when no longer needed.

```javascript theme={null}
const unsubscribe = CometChatCalls.addEventListener("eventName", (data) => {
  // Handle the event
});

// Later, to remove the listener:
unsubscribe();
```

***

## Session Events

Monitor the call session lifecycle including join/leave events and connection status.

### Session Joined

Fired when you successfully connect to the session.

```javascript theme={null}
CometChatCalls.addEventListener("onSessionJoined", () => {
  console.log("Successfully joined the session");
});
```

### Session Left

Fired when you leave the session.

```javascript theme={null}
CometChatCalls.addEventListener("onSessionLeft", () => {
  console.log("Left the session");
});
```

### Session Timed Out

Fired when the session ends due to inactivity timeout.

```javascript theme={null}
CometChatCalls.addEventListener("onSessionTimedOut", () => {
  console.log("Session timed out");
});
```

### Connection Lost

Fired when the network connection is interrupted.

```javascript theme={null}
CometChatCalls.addEventListener("onConnectionLost", () => {
  console.log("Connection lost, attempting to reconnect...");
});
```

### Connection Restored

Fired when the connection is restored after being lost.

```javascript theme={null}
CometChatCalls.addEventListener("onConnectionRestored", () => {
  console.log("Connection restored");
});
```

### Connection Closed

Fired when the connection is permanently closed.

```javascript theme={null}
CometChatCalls.addEventListener("onConnectionClosed", () => {
  console.log("Connection closed");
});
```

***

## Participant Events

Monitor participant activities including join/leave, audio/video state, hand raise, screen sharing, and recording.

### Participant Joined

Fired when a participant joins the call.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantJoined", (participant) => {
  console.log("Participant joined:", participant.name);
});
```

### Participant Left

Fired when a participant leaves the call.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantLeft", (participant) => {
  console.log("Participant left:", participant.name);
});
```

### Participant List Changed

Fired when the participant list is updated.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantListChanged", (participants) => {
  console.log("Participants:", participants.length);
});
```

### Participant Audio Muted

Fired when a participant mutes their microphone.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantAudioMuted", (participant) => {
  console.log("Participant muted:", participant.name);
});
```

### Participant Audio Unmuted

Fired when a participant unmutes their microphone.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantAudioUnmuted", (participant) => {
  console.log("Participant unmuted:", participant.name);
});
```

### Participant Video Paused

Fired when a participant turns off their camera.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantVideoPaused", (participant) => {
  console.log("Participant video paused:", participant.name);
});
```

### Participant Video Resumed

Fired when a participant turns on their camera.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantVideoResumed", (participant) => {
  console.log("Participant video resumed:", participant.name);
});
```

### Participant Hand Raised

Fired when a participant raises their hand.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantHandRaised", (participant) => {
  console.log("Participant raised hand:", participant.name);
});
```

### Participant Hand Lowered

Fired when a participant lowers their hand.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantHandLowered", (participant) => {
  console.log("Participant lowered hand:", participant.name);
});
```

### Participant Started Screen Share

Fired when a participant starts screen sharing.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantStartedScreenShare", (participant) => {
  console.log("Participant started screen share:", participant.name);
});
```

### Participant Stopped Screen Share

Fired when a participant stops screen sharing.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantStoppedScreenShare", (participant) => {
  console.log("Participant stopped screen share:", participant.name);
});
```

### Participant Started Recording

Fired when a participant starts recording.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantStartedRecording", (participant) => {
  console.log("Participant started recording:", participant.name);
});
```

### Participant Stopped Recording

Fired when a participant stops recording.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantStoppedRecording", (participant) => {
  console.log("Participant stopped recording:", participant.name);
});
```

### Dominant Speaker Changed

Fired when the active speaker changes.

```javascript theme={null}
CometChatCalls.addEventListener("onDominantSpeakerChanged", (participant) => {
  console.log("Dominant speaker:", participant.name);
});
```

***

## Media Events

Monitor your local media state changes including audio/video status, recording, and device changes.

### Audio Muted

Fired when your microphone is muted.

```javascript theme={null}
CometChatCalls.addEventListener("onAudioMuted", () => {
  console.log("Your audio is muted");
});
```

### Audio Unmuted

Fired when your microphone is unmuted.

```javascript theme={null}
CometChatCalls.addEventListener("onAudioUnMuted", () => {
  console.log("Your audio is unmuted");
});
```

### Video Paused

Fired when your camera is turned off.

```javascript theme={null}
CometChatCalls.addEventListener("onVideoPaused", () => {
  console.log("Your video is paused");
});
```

### Video Resumed

Fired when your camera is turned on.

```javascript theme={null}
CometChatCalls.addEventListener("onVideoResumed", () => {
  console.log("Your video is resumed");
});
```

### Recording Started

Fired when call recording starts.

```javascript theme={null}
CometChatCalls.addEventListener("onRecordingStarted", () => {
  console.log("Recording started");
});
```

### Recording Stopped

Fired when call recording stops.

```javascript theme={null}
CometChatCalls.addEventListener("onRecordingStopped", () => {
  console.log("Recording stopped");
});
```

### Screen Share Started

Fired when you start screen sharing.

```javascript theme={null}
CometChatCalls.addEventListener("onScreenShareStarted", () => {
  console.log("Screen sharing started");
});
```

### Screen Share Stopped

Fired when you stop screen sharing.

```javascript theme={null}
CometChatCalls.addEventListener("onScreenShareStopped", () => {
  console.log("Screen sharing stopped");
});
```

### Audio Input Device Changed

Fired when the audio input device changes.

```javascript theme={null}
CometChatCalls.addEventListener("onAudioInputDeviceChanged", (device) => {
  console.log("Audio input device changed:", device);
});
```

### Audio Output Device Changed

Fired when the audio output device changes.

```javascript theme={null}
CometChatCalls.addEventListener("onAudioOutputDeviceChanged", (device) => {
  console.log("Audio output device changed:", device);
});
```

### Video Input Device Changed

Fired when the video input device changes.

```javascript theme={null}
CometChatCalls.addEventListener("onVideoInputDeviceChanged", (device) => {
  console.log("Video input device changed:", device);
});
```

### Audio Input Devices Changed

Fired when the list of available audio input devices changes.

```javascript theme={null}
CometChatCalls.addEventListener("onAudioInputDevicesChanged", (devices) => {
  console.log("Audio input devices updated:", devices);
});
```

### Audio Output Devices Changed

Fired when the list of available audio output devices changes.

```javascript theme={null}
CometChatCalls.addEventListener("onAudioOutputDevicesChanged", (devices) => {
  console.log("Audio output devices updated:", devices);
});
```

### Video Input Devices Changed

Fired when the list of available video input devices changes.

```javascript theme={null}
CometChatCalls.addEventListener("onVideoInputDevicesChanged", (devices) => {
  console.log("Video input devices updated:", devices);
});
```

***

## Button Click Events

Intercept UI button clicks from the default call interface to add custom behavior or analytics.

### Leave Session Button Clicked

Fired when the leave button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onLeaveSessionButtonClicked", () => {
  console.log("Leave button clicked");
});
```

### Toggle Audio Button Clicked

Fired when the mute/unmute button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onToggleAudioButtonClicked", () => {
  console.log("Audio toggle button clicked");
});
```

### Toggle Video Button Clicked

Fired when the video on/off button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onToggleVideoButtonClicked", () => {
  console.log("Video toggle button clicked");
});
```

### Raise Hand Button Clicked

Fired when the raise hand button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onRaiseHandButtonClicked", () => {
  console.log("Raise hand button clicked");
});
```

### Share Invite Button Clicked

Fired when the share/invite button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onShareInviteButtonClicked", () => {
  console.log("Share invite button clicked");
});
```

### Change Layout Button Clicked

Fired when the layout change button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onChangeLayoutButtonClicked", () => {
  console.log("Change layout button clicked");
});
```

### Participant List Button Clicked

Fired when the participant list button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantListButtonClicked", () => {
  console.log("Participant list button clicked");
});
```

### Chat Button Clicked

Fired when the in-call chat button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onChatButtonClicked", () => {
  console.log("Chat button clicked");
});
```

### Recording Toggle Button Clicked

Fired when the recording toggle button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onRecordingToggleButtonClicked", () => {
  console.log("Recording toggle button clicked");
});
```

### Screen Share Button Clicked

Fired when the screen share button is clicked.

```javascript theme={null}
CometChatCalls.addEventListener("onScreenShareButtonClicked", () => {
  console.log("Screen share button clicked");
});
```

***

## Layout Events

Monitor layout changes including layout type switches and participant list visibility.

### Call Layout Changed

Fired when the call layout changes.

```javascript theme={null}
CometChatCalls.addEventListener("onCallLayoutChanged", (layout) => {
  console.log("Layout changed to:", layout);
});
```

### Participant List Visible

Fired when the participant list panel is opened.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantListVisible", () => {
  console.log("Participant list opened");
});
```

### Participant List Hidden

Fired when the participant list panel is closed.

```javascript theme={null}
CometChatCalls.addEventListener("onParticipantListHidden", () => {
  console.log("Participant list closed");
});
```

***

## Participant Object Reference

| Property | Type   | Description                           |
| -------- | ------ | ------------------------------------- |
| `uid`    | String | Unique identifier (CometChat user ID) |
| `name`   | String | Display name                          |
| `avatar` | String | URL of avatar image                   |