Example
<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;
border: 1px solid blue;
margin: auto;
margin-top: 15px;
}
</style>
<div>Tap me for alert message</div>
<div id="inner">Tap me for different alert</div>
</template>
</dom-module>
<script>
Polymer({
is:'using-listeners-obj',
//Listener Object
listeners:{
//tap a special gesture event in Polymer. Its like click event the main difference being it is more mobile deivce friendly
'tap':'tapped', //this will get executed on host of the element
'inner.tap':'divTapped' //this tap will get executed only on the mentioned node (inner in this case)
},
tapped:function(){
alert('you have tapped host element');
},
divTapped:function(e){
event.stopPropagation(); //this is only to stop bubbling of event. If you comment this then tap event will bubble and parent's(host) listener will also get executed.
console.log(e);
alert('you have tapped inner div');
}
})
</script>
