By default, it this.fire()causes a bubble, even if all elements are processed by the DOM tree. Like most events in the browser.
Polymer API, API , fire : , . bubbles: false, DOM.
. , , , .
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>