Polymer Events

Polymer events are used by Polymer elements to communicate with state changes of DOM tree to parent elements. Polymer uses the standard DOM APIs for creating, dispatching, and listening for events.

Polymer uses annotated event listeners and defines them as small chunks of DOM template. They can be added to DOM children using onevent annotations in the template.

Add Event Listener

There are two ways to add event listener:

Event listener can be added to host element by providing a listeners object that maps events to event handler function names.

Event listener can also be added to any element in the this.$ collection using the syntax

Example

Add Annotated Event Listener

You can add event listeners to local DOM children by using on-event annotations in your template. By using this method, you don't need to give an element an id to bind an event listener.

Example

Add and Remove Listener

listen() and unlisten() methods are used to imperatively add and remove listeners.

Note: If a listener is added imperatively, it must have to be removed imperatively. This is commonly done in the attached and detached callbacks.

If listeners object or annotated event listeners are used, Polymer automatically adds and removes the event listeners.

Custom Events

You can trigger or fire a custom event by using the standard CustomEvent constructor and the dispatchEvent () method from the host element.

Let's take an example to trigger a custom event from the host element. Create a file name index.html and use the following code in it.

Now, create another file named custom-event.html and use the following code within it.

Now, after clicking on "Click Here" button, you can see the true value for the custom event.

Gesture Events

Gesture events are used to make user interaction more pleasurable on both touch and mobile devices. For example: tap event is a part of gesture event which fires consistently on both mobile and desktop devices.

Following is a list of different supported gesture event types:

Table:

Example

Let's take an example to demonstrate the use of gesture event types in the template. Create a file named index.html and use the following code within it.

Create another file named gesture-event.html having the following code.

Output:

Hover and drag the mouse in the element, it will show the progress of event tracking like this:

When you stop dragging the mouse, it will end the tracking event on the element like this: