Events in Polymer

When playing around in Polymer, we encounter iron signals. Besides normal javascript events, this gives us a lot of options for dealing with events. Lets try it all out!

We can catch events using the on-event attribute:

This calls method push1:

Scroll down for the complete code listing. Or see it on github.

Another way to catch it is using a listener:

We can also fire our own events:

We can catch that in the parent component using the on-event attribute or a listener.

These events will always bubble up to parent components. Even when the event is caught. But never sideways.

So in this situation the methods push, push-parent and push-grandparent will be called, but not push-sibling.

So it’s good to not use too generic names, because the parent component might also use that event.
You can prevent that by prefixing your event names with your component name.

you can stop an event from bubbling up by using event.stopPropagation():

You can also use iron-signals to throw events sideways.

Throw them:

and catch them:

You can also catch them in multiple places.

I recommend against using iron-signals, because it can be hard to find out where the even comes from or will be caught. Use the rule of least power and stay with normal javascript events.

Complete code.
Polymer-events.html:

This uses subComponent1:

and subComponent2:

Leave a Reply

Your email address will not be published. Required fields are marked *