beauwest/test-change-listener.html

## test-change-listener.html
<!doctype html>
<meta charset="utf-8">
<base href="http://polygit.org/polymer+v1.2.4/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link href="polymer/polymer.html" rel="import">

<script>
  addEventListener('WebComponentsReady', function () {
    window.InputBehavior = {
      properties: {
        displayValue: {type: String, notify: true, observer: 'displayValueChanged'},
        currentvalue: {type: String, notify: true, observer: 'currentvalueChanged'}
      },
      listeners: {
        'field.input': 'handleInput'
      },
      handleInput: function () {
        this.currentvalue = this.$.field.value;
      },
      currentvalueChanged: function (newValue) {
        console.log('original', 'changed', newValue);
      }
    };
    window.CustomBehavior = {
      behaviorEvent: function (event) {
        event.stopPropagation(); // <--- THIS DOES IT!
        console.log('behavior', 'changed', event);
      },
      attached: function () {
        this.listen(this, 'currentvalue-changed', 'behaviorEvent');
      }
    };
  });
</script>

<dom-module id="custom-input">
  <template>
    <input type="text" id="field">
  </template>
  <script>
    addEventListener('WebComponentsReady', function () {
      Polymer({
        is: 'custom-input',
        behaviors: [
          InputBehavior,
          CustomBehavior
        ]
      });
    });
  </script>
</dom-module>

<script>
  addEventListener('WebComponentsReady', function () {
    var element = document.createElement('custom-input');
    document.body.appendChild(element);
  });
</script>
	<!doctype html>
	<meta charset="utf-8">
	<base href="http://polygit.org/polymer+v1.2.4/components/">
	<script src="webcomponentsjs/webcomponents-lite.js"></script>
	<link href="polymer/polymer.html" rel="import">

	<script>
	addEventListener('WebComponentsReady', function () {
	window.InputBehavior = {
	properties: {
	displayValue: {type: String, notify: true, observer: 'displayValueChanged'},
	currentvalue: {type: String, notify: true, observer: 'currentvalueChanged'}
	},
	listeners: {
	'field.input': 'handleInput'
	},
	handleInput: function () {
	this.currentvalue = this.$.field.value;
	},
	currentvalueChanged: function (newValue) {
	console.log('original', 'changed', newValue);
	}
	};
	window.CustomBehavior = {
	behaviorEvent: function (event) {
	event.stopPropagation(); // <--- THIS DOES IT!
	console.log('behavior', 'changed', event);
	},
	attached: function () {
	this.listen(this, 'currentvalue-changed', 'behaviorEvent');
	}
	};
	});
	</script>

	<dom-module id="custom-input">
	<template>
	<input type="text" id="field">
	</template>
	<script>
	addEventListener('WebComponentsReady', function () {
	Polymer({
	is: 'custom-input',
	behaviors: [
	InputBehavior,
	CustomBehavior
	]
	});
	});
	</script>
	</dom-module>

	<script>
	addEventListener('WebComponentsReady', function () {
	var element = document.createElement('custom-input');
	document.body.appendChild(element);
	});
	</script>