# Events

The FloatingToolBar exposes events for visibility changes, pointer and keyboard movement, and key handling. Configure them during initialization or subscribe to them on the widget instance.

```html
<div id="floatingtoolbar"></div>

<script>
    $("#floatingtoolbar").kendoFloatingToolBar({
        visible: true,
        draggable: true,
        items: [{ type: "button", text: "Save", icon: "save" }],
        show: function (e) {
            console.log("Toolbar shown", e.sender);
        },
        hide: function (e) {
            console.log("Toolbar hidden", e.sender);
        },
        dragStart: function (e) {
            console.log("Move started", e.top, e.left);
        },
        move: function (e) {
            console.log("Position", e.top, e.left);
        },
        dragEnd: function (e) {
            console.log("Move ended", e.top, e.left);
        }
    });
</script>
```

The `show` and `hide` events fire before their respective visibility transitions and can be canceled with `e.preventDefault()`. `dragStart` can also be canceled. `move` fires when the toolbar moves through dragging, keyboard Move mode, or `setPosition`; `dragEnd` fires when pointer dragging or keyboard Move mode ends. `kendoKeydown` lets you observe or override the widget's keyboard handling by using `e.preventKendoKeydown`.

## Next Steps

* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/keyboard-navigation)
* [Accessibility of the FloatingToolBar](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/overview)

## See Also

* [JavaScript API Reference](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/floatingtoolbar#events)