# Setting Event Handlers via JavaScript

The **RadToggleButton** API exposes client-side methods to attach and detach function to its events. They can be used as alternatives to the server-side properties for handling events.

To handle the desired event, you can use the respective **add\_<eventName>(handlerFunction)** to attach the desired handler (i.e., **add_clicked** for the clicked event), where the parameter *handlerFunction* should be of type **function**. To remove the handler that has been added previously, the respective **remove\_<eventName>(handlerFunction)** should be used.

Here are examples showing how to add and remove handlers on the client:

> caption Example 1: Adding a named (non-anonymous) JavaScript click handler to a RadToggleButton.

```ASP.NET
<script type="text/javascript">
	function Click(button, args)
	{
		alert("Button was clicked");
	}
	function addHandler()
	{
		var toggleButton = $find("<%=RadToggleButton1.ClientID %>");
		toggleButton.add_clicked(Click);
	}
</script>
```

> caption Example 2: Adding an anonymous JavaScript click handler to a RadToggleButton.

```ASP.NET
<script type="text/javascript">
	function Click(button, args, arg1)
	{
		alert("Button was clicked. arg1: " + arg1);
	}
	function addHandler()
	{
		var toggleButton = $find("<%=RadToggleButton1.ClientID %>");
		toggleButton.add_clicked(function (button, args) { Click(button, args, "Value1") });
	}
</script>
```

> caption Example 3: Removing a JavaScript click handler from a RadToggleButton.

```JavaScript
function removeEvents()
{
    var toggleButton = $find("<%= RadToggleButton1.ClientID %>");
    toggleButton.remove_show(Click);
}
```

> caption Table 1: Available add/remove methods for handling client-side events.

| Name                              | Description                                                                                 |
| --------------------------------- | ------------------------------------------------------------------------------------------- |
| **.add_load()**                   | The name of the JavaScript function called when the control loads.                          |
| **.remove_load()**                | Removes a handler for the load event.                                                       |
| **.add_clicking()**               | The name of the JavaScript function called when the RadToggleButton control is clicked.     |
| **.remove_clicking()**            | Removes a handler for the clicking event.                                                   |
| **.add_toggleStateChanging()**    | The name of the JavaScript function called before the state of the ToggleButton is changed. |
| **.remove_toggleStateChanging()** | Removes a handler for the toggleStateChanging event.                                        |
| **.add_toggleStateChanged()**     | The name of the JavaScript function called when the state of the ToggleButton is changed.   |
| **.remove_toggleStateChanged()**  | Removes a handler for the toggleStateChanged event.                                         |
| **.add_clicked()**                | The name of the JavaScript function called when the RadToggleButton control is clicked.     |
| **.remove_clicked()**             | Removes a handler for the clicked event.                                                    |
| **.add_mouseOver()**              | The name of the JavaScript function called when the mouse hovers over the control.          |
| **.remove_mouseOver()**           | Removes a handler for the mouseOver event.                                                  |
| **.add_mouseOut()**               | The name of the JavaScript function when the mouse leaves the control.                      |
| **.remove_mouseOut()**            | Removes a handler for the mouseOut event.                                                   |

## See Also

* [ToggleButton Object](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/togglebutton-object)

* [Events Overview](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/overview)

* [OnClientClicking](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/onclientclicking)

* [OnClientToggleStateChanging](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/onclienttogglestatechanging)

* [OnClientToggleStateChanged](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/onclienttogglestatechanged)

* [OnClientClicked](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/onclientclicked)

* [OnClientMouseOver](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/onclientmouseover)

* [OnClientMouseOut](https://www.telerik.com/products/aspnet-ajax/documentation/controls/togglebutton/client-side-programming/events/onclientmouseout)