justin-lyon/event-demo.html

## event-demo.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Event Demo</title>

  <style type="text/css">
    .grid {
      display: grid;
      grid-template-columns: 100px 100px 100px 100px;
      grid-gap: 10px;
      background-color: #fff;
      color: #444;
      margin: 16px;
    }

    .grid .box {
      background-color: #fffc63;
      border-radius: 5px;
      padding: 20px;
      font-size: 150%;
      border: 1px solid black;
      text-align: center;
    }

    .box.target {
      background-color: #4286f4;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="grid">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
    </div>

    <div class="grid">
      <div class="box target" id="target">1</div>
    </div>
  </div>

  <script type="text/javascript">
    var container = document.querySelector(".container");
    var target = document.getElementById("target");
    var boxes = document.querySelectorAll(".box");
    var fooEvent = new Event("foo", { bubbles: true });

    var clickBox = function(event) {
      event.target.dispatchEvent(fooEvent);
    };

    var setContent = function(event) {
      target.textContent = event.target.textContent;
    };

    boxes.forEach(function(box) {
      box.addEventListener("click", clickBox);
    });
    container.addEventListener("foo", setContent);
    // target.addEventListener("foo", setContent);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Event Demo</title>

	<style type="text/css">
	.grid {
	display: grid;
	grid-template-columns: 100px 100px 100px 100px;
	grid-gap: 10px;
	background-color: #fff;
	color: #444;
	margin: 16px;
	}

	.grid .box {
	background-color: #fffc63;
	border-radius: 5px;
	padding: 20px;
	font-size: 150%;
	border: 1px solid black;
	text-align: center;
	}

	.box.target {
	background-color: #4286f4;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="grid">
	<div class="box">1</div>
	<div class="box">2</div>
	<div class="box">3</div>
	<div class="box">4</div>
	</div>

	<div class="grid">
	<div class="box target" id="target">1</div>
	</div>
	</div>

	<script type="text/javascript">
	var container = document.querySelector(".container");
	var target = document.getElementById("target");
	var boxes = document.querySelectorAll(".box");
	var fooEvent = new Event("foo", { bubbles: true });

	var clickBox = function(event) {
	event.target.dispatchEvent(fooEvent);
	};

	var setContent = function(event) {
	target.textContent = event.target.textContent;
	};

	boxes.forEach(function(box) {
	box.addEventListener("click", clickBox);
	});
	container.addEventListener("foo", setContent);
	// target.addEventListener("foo", setContent);
	</script>
	</body>
	</html>