> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.noticeable.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to listen to events with the Noticeable JavaScript SDK?

The Noticeable [JavaScript SDK](/en-us/article/how-to-use-the-noticeable-javascript-sdk-7k5kc2/) allows listening to events.

# Supported Event Types

Here are the event types that you can listen to:

* widget:closed
* widget:header:link:clicked
* widget:opened
* widget:publication:comment:created
* widget:publication:reaction:created
* widget:publication:reaction:updated
* widget:publication_summary:clicked
* widget:publication:unread_count:changed
* widget:publication:unseen_count:changed
* widget:ready
* widget:refreshed
* widget:rendering:aborted
* widget:trigger:ready
* widget:trigger:refreshed
* widget:trigger_view:clicked
* widget:trigger_view:mouse_entered
* widget:trigger_view:mouse_left
* widget:widget_view:mouse_entered
* widget:widget_view:mouse_left

# Listening to Events

The Noticeable SDK exposes `noticeable.on(eventType, resourceId, func)` to listen to events, where:

* **eventType** is the name of the event type you want to listen to. See the list above to know what are the events that are supported.
* **resourceId** is the identifier of the Noticeable component you are listening events to. For instance, if you are targeting events related to a widget, you will need to use your widget ID.
* **func** is a function receiving an event as a single parameter. 

Below is a concrete example to listen when a widget is _opened_:

```
noticeable.on('widget:opened', widgetId, function(event) { ... })
noticeable.render('widget', widgetId)
```

The _event_ parameter from **func** (your custom function definition) is an object with the following properties:

* **detail**: an object containing data related to the event received, or _undefined_.
* **resourceId**: the identifier of the component you received the event for.
* **type**: the event type you received.

|| All listeners are tied to a widget, which must be rendered for the callback listeners to be executed.

# Removing a Listener

To stop listening to an event type, you can use `noticeable.off(eventType, resourceId)`, where:

* **eventType** is the name of the event type you want to stop listening.
* **resourceId** is the identifier of the Noticeable component you are listening events to. For instance, if you are targeting events related to a widget, you will need to use your widget ID.

In the case you want to remove all listeners you can use `noticeable.off()`.