Javatpoint Logo
Javatpoint Logo

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.

Polymer custom event

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

Polymer custom event 1

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:

Index Event type Description Properties
1) down The down event type is used to specify that the finger/button has moved down. x: It provides the clientX coordinate for an event.
y: It provides the clientY coordinate for an event.
sourceEvent: It specifies the down action caused by DOM event.
2) up The up event type is used to specify that the finger/button has moved up. x: It provides the clientX coordinate for an event.
y: It provides the clientY coordinate for an event.
sourceEvent: It specifies the up action caused by DOM event.
3) tap The tap event type is used to specify the occurrence of up and down actions. x: It provides the clientX coordinate for an event.
y: It provides the clientY coordinate for an event.
sourceEvent: It is used to specify the tap action caused by DOM event.
4) track The track event type is used to track the movement while finger/button is down. x: It is used to provide the clientX coordinate for an event.
y: It is used to provide the clientY coordinate for an event.
state: It is a type string that specifies the tracking state.
dx: It horizontally makes the changes in pixels, when you track the first event.
dy: It vertically makes the changes in pixels, when you track the first event.
ddx: It horizontally makes the changes in pixels, when you track the last event.
ddy: It vertically makes the changes in pixels, when you track the last event.
hover(): It is used to determine the currently hovered element.

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:

Polymer Gesture event 1

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

Polymer Gesture event 2




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA