Menu
Suppose the following is called from within a Polymer element:
this.fire("reset-counters");.
Will the reset-counters event be published to all elements that listen for that event or is in heard within the element that called this.fire() only?
951
By default this.fire() raises a bubbling even which will be handled by all elements up the DOM tree. Like most events in the browser.
Polymer does however offer an API similar to the native events API, The fire method takes three parameters: event name, details object and options object. In options, set bubbles: false to forbid the event from being pushed up the DOM tree.
See the example below to see how only the immediate listener fires when you click the second button.
Polymer({
is: 'my-elem',
bubbling: function() {
this.fire('my-event', 'bubbling');
},
nonbubbling: function() {
this.fire('my-event', 'nonbubbling', {
bubbles: false
});
}
});<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
</head>
<body>
<div>
<my-elem></my-elem>
</div>
<dom-module id="my-elem">
<template>
<input type="button" value="fire bubbling" on-tap="bubbling" />
<input type="button" value="fire non-bubbling" on-tap="nonbubbling" />
</template>
</dom-module>
<script>
document.querySelector('my-elem')
.addEventListener('my-event', handle('my-elem'));
document.querySelector('div')
.addEventListener('my-event', handle('div'));
document
.addEventListener('my-event', handle('document'));
function handle(elem) {
return function(e) {
console.log(e.detail + ' handled on ' + elem);
};
}
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
