Events and Behaviors in Polymer.js


Welcome to the final part of this review of the new Pluralsight course Getting Started with Polymer.js by Bill Stavroulakis.

Bill is a Microsoft MVP, and the creator of Dotnetweekly. He started his career in Silicon Valley in 2006 developing Facebook applications with more than 6 million users. He then worked on the Ruby-on-Rails framework, implementing a back-end portal for a renowned educational institution in Greece. Nowadays, he focuses on the .NET platform and works with a start-up in the educational field called Drexnotes.

Also in this series:

Part 1 – Your First Element

Part 2 – Properties and Databinding

Part 3 – Reuse and Styling

Events and Behaviors

Polymer Events

Introduction to Polymer events plunk

There are several methods for binding to events in Polymer.

We can use a method beginning with on- such as:

  • on-click
  • on-tap
  • on-mouseover

on-tap is a gesture event and it’s recommended over on-click for and event that works consistently on both desktop and touch based devices.

Bill also introduces the listeners object, which is used to bind events to executing functions. And we see the listen and unlisten methods in action.

Also see Annotated event listener setup

Custom Events

How to setup our own custom events in our elements plunk

Here we have an alert element containing an array of strings.

alerts: {
value:['alert1', 'alert2']

The template uses dom-repeat and adds a button for each item in the array.

  • {{item}}Remove

When we click on the remove button, the remove item button is triggered, the following function is run:

removeItem: function(e){
this.splice('alerts', e.model.index, 1);"alert-item-removed", e.model.item);

Bill explains the fire method

Gesture Events

Gesture events for touch and mouse environments plunk

This example logs each tracking event, and Bill shows that it repeatedly displays the latest mouse coordinates to the console.

on-tap should be used instead of on-click for reliable cross-platform results.

Event Retargeting

Finding the event target as they bubble plunk

Bill begins by explaining the concept of bubbling.

Event retargeting is a Shadow DOM feature which changes an event’s target as it bubbles up.

The example demonstrates this by logging the rootTarget, localTarget and the path to the console.

Also see the official docs


Extending custom element prototypes with shared code modules plunk

Polymer gives us the ability to share code and functionality between element prototypes.

This example toggles the boolean property isToggled

is: "alert-element",
behaviors: [ToggleBehavior]

Bill concludes by explaining that behaviors are prototype declarations that we can expand on, and events are actions that we listen to.

Congratulations on making it all of the way through the course. We have covered almost everything in the Polymer framework.

Further Reading

Thinking in Polymer

Polymer and Progressive Web Apps – Google I/O 2016

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s