index.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<title>CSS Selector Listeners</title>
		<script type="text/javascript" src="selector-listeners.js"></script>
		
		<style>
			
			body {
        padding: 1em;
				font-family: Arial;
			}

      .fields {
        display: flex;
        max-width: 500px;
        margin: 0 0 1em;
      }

      .fields button {
        white-space: nowrap;
      }

      #selectorText,
      #tagText {
        flex-grow: 1;
        margin-right: 0.5em;
			}
			
			#container0,
      #container1 {
				min-height: 100px;
				margin: 1em 0;
				background: #eee;
				border: 1px solid #ccc;
			}
			
			#container0 > *, #container1 > * {
				margin: 10px;
				background: #ADDFFD;
			}
			
			#console_warning {
				text-align: center;
				color: #BF6F6A;
			}
			
		</style>
	</head>
	
<body>
  <section class="fields">
    <input id="selectorText" type="text" placeholder="Enter at-rules (optional) and a selector (separate with &&)" />
    <button id="addListener">Add Listener</button>
  </section>
  <section class="fields">
    <input id="tagText" type="text" placeholder="Enter tag name of an element to add" />
    <button id="addElement">Add Element</button>
  </section>
	
	<section class="container" id="container0"></section>
	<section class="container" id="container1"></section>
	
	<div id="console_warning">TURN ON YOUR CONSOLE!</div>
</body>

<script type="text/javascript">

(function(){
	
	var printListener = function(event){
    console.log('------ Matched! ------');
    console.log('selector: ' + event.selector);
    console.log('event:', event);
	}
	
	document.getElementById('addListener').addEventListener('click', function(){
    var selector = document.getElementById('selectorText').value;
		if (selector) {
      document.addSelectorListener(selector.split('&&'), printListener);
    }
	});
	
	document.getElementById('addElement').addEventListener('click', function(){
		var tag = document.getElementById('tagText').value || 'div';
		var div = document.createElement(tag);
		div.innerHTML = tag.toUpperCase() + " element";
		document.getElementById('container' + Math.floor(Math.random() * 2)).appendChild(div);
  });
  
  document.addEventListener('click', function(e){
    var parent = e.target.parentNode;
    if (parent && parent.className == 'container') parent.removeChild(e.target);
	});

})();
	
</script>

</html>