Tutorial by Examples

<dom-module id="using-listeners-obj"> <template> <style> :host{ width: 220px; height: 100px; border: 1px solid black; display: block; } #inner{ width: calc(100% - 10px); height: 50px; ...

Another way to add an event listener is to use on-event annotation in DOM. Below is an example using up event, which is fired when finger/mouse goes up <dom-module id="annotated-listener"> <template> <style> .inner{ width: calc(200px); he...

You can also add/remove listener imperatively using listen and unlisten method of Polymer <dom-module id="imparative-listener"> <template> <style> #inner{ width: 200px; height: 50px; border: 1px solid ...

You can also fire your own events and then listen to them from either Polymer element of HTML page This Element fires the custom event <dom-module id="custom-event"> <template> <style> #inner{ width: 200px; height: 50px; bor...

Properties with notify:true also fires an event <link rel="import" href="../bower_components/paper-input/paper-input.html"> <dom-module id="property-change-event"> <template> <style></style> <paper-input id="input&quo...

It is possible to retarget an event in Polymer ie you can change event details like path thus hiding the actual details of an event/element from user. For e.g if a div inside event-retargeting element is firing the event but developer does not want the user to know that he can retarget the event to...