> For the complete documentation index, see [llms.txt](https://docs.whisk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.whisk.com/shopping-list-sdk/basic-setup/event-listeners.md).

# Event Listeners

Event listeners allow you to automatically call any Whisk SDK [basic method](/shopping-list-sdk/basic-setup/methods.md) in response to user actions.

* [Click Listeners](/shopping-list-sdk/basic-setup/event-listeners.md#click-listeners)
* [Page Load Listener](/shopping-list-sdk/basic-setup/event-listeners.md#page-load-listener)

## Click Listeners

Click listeners allow you to call any Whisk SDK [basic method](/shopping-list-sdk/basic-setup/methods.md) in response to user click on predefined DOM element. In order to create a click listener call

```javascript
whisk.listeners.addClickListener(element_id, method_name, method_parameters)
```

function, which will add an event listener to DOM element with element\_id id attribute. This listener will call the method name method with method\_parameters.

method\_parameters supports the same parameters as a method\_name does, plus one extra non-required parameter:

| ATTRIBUTE | TYPE    | DESCRIPTION                                                                                                                                                                                                                                                                                    |
| --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| trackView | boolean | If you're planning to use multiple buttons with a click listener on a single page, you might consider passing false to all buttons except one to eliminate duplicate view events (impressions) sent to Whisk analytics. Note: This field won't affect subscription events. Default value: true |

Here is a simple example of usage:

```javascript
whisk.queue.push(function() {
    whisk.listeners.addClickListener('button1', 'shoppingList.addRecipeToList', {
    recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers',
    });
});
```

**Add recipe to shopping list**

Note: recipeUrl is optional and can be excluded. If it is not included, the URL of your page (which this code is used on) will be taken as the recipe URL.

In order to remove click listener call 

`whisk.listeners.removeClickListener(element_id)` with the same `element_id` you used in whisk.listeners.addClickListener.

If you need to update parameters for existing click listener, you can simply call whisk.listeners.addClickListener on the same element\_id with new values.

### Subscriptions

Read general information about subscriptions [here](/shopping-list-sdk/basic-setup/subscriptions.md). Click listeners support following event types:

* view - the element to which click listener is attached appeared in the viewport. Triggered once. No custom data for this event type.
* click - the element to which click listener is attached has been clicked. No custom data for this event type.

## Page Load Listener

Page load listeners allow you to call any Whisk SDK [basic method](/shopping-list-sdk/basic-setup/methods.md) in response to page load when`whisk-show=1` parameter is in the page URL. In order to create a page listener call

```javascript
whisk.listeners.addShowListener(method_name, method_parameters)
```

function. This listener will call `method_name`method with `method_parameters`. Here is simple example of usage:

```javascript
whisk.queue.push(function() {
     whisk.listeners.addShowListener('shoppingList.addRecipeToList', {
     recipeUrl: 'https://whisk.com/demo/calzone-roasted-peppers',
    });
 });
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.whisk.com/shopping-list-sdk/basic-setup/event-listeners.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.