# Events

Events are dispatched from the root element of the component and are prefixed with the name of the component. Note that — to be an idiomatic WebComponent — all communication form the component back to the outside world occurs via events.

## hy-drawer-init

This event is fired after the component gets attached to the DOM. Note that this event occurs more than once when the component gets removed and attached to the DOM again. The current opened state is provided in the detail field of the event.

jQuery event name
init.hy.drawer

## hy-drawer-prepare

This event is fired when there’s a tap/click within the range. This is when you’d want to set will-change CSS properties if you have any animation that move in sync with the drawer (see hy-drawer-move).

jQuery event name
prepare.hy.drawer

## hy-drawer-slidestart

This event is fired when the user starts sliding the drawer. Note that this event does not occur on every touch motion, since the user could also be scrolling the page!

jQuery event name
slidestart.hy.drawer

## hy-drawer-slideend

This event is fired when the user stops sliding the drawer, i.e. it is always proceeded by a slidestart event. However, it is fired before the drawer starts transitioning towards the next opened state. The next opened state is provided in the detail field of the event.

NOTE: Currently, this event can occur even when there was no prior slidestart event. Specifically, it will occur if the users taps the screen during the animation.

jQuery event name
slideend.hy.drawer

## hy-drawer-transitioned

This event is fired after a completed transitioning to the new opened state. The new opened state is provided in the detail field of the event.

jQuery event name
transitioned.hy.drawer