custom event

by peroli

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div class="outer">
  <div class="inner">
    Some Component
  </div>
</div>

JavaScript

function createCustomEvent() {
		return new CustomEvent('componentLoaded', {
    		bubbles: true,
      	detail: Math.random() // it can also be an object
    });
}

var outer = document.querySelector('.outer'),
		inner = document.querySelector('.inner');

outer.addEventListener('componentLoaded', function(e){
	console.log('custom event received!', e.detail);
});

inner.dispatchEvent(createCustomEvent());