website/webdevelopment/javascriptessentialtraining.../codesamples/chapter9/events/scriptjs.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Learning Website</title>
<link href="/styles/styles.css" rel="stylesheet" type="text/css">
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body id="homebody">
	<div class="header">
		<h1>The script.js file for course video 9_02 - Event Handlers</h1>
	</div>
	<pre class="codesample">
	/**
	 * Events aplenty.
	 * @link https://developer.mozilla.org/en-US/docs/Web/Events
	 */

	const container = document.querySelector(".container");
	const button = document.querySelector(".cta-button");
	const posX = document.querySelector(".posX span");
	const posY = document.querySelector(".posY span");

	// Log when the button is clicked in the console.
	button.addEventListener("click", () =&gt; {
	  button.classList.toggle("active");
	  console.log("Button was clicked!");
	}, false);

	// Update the x and y displays to show the current mouse position.
	const mousePosition = (event) =&gt; {
	  posX.innerText = event.pageX;
	  posY.innerText = event.pageY;
	};

	window.addEventListener("mousemove", mousePosition, false);

	// Change the color of the box when the mouse enters.
	container.addEventListener(
	  "mouseenter",
	  () =&gt; {
		container.classList.add("blue");
	  },
	  false
	);

	container.addEventListener(
	  "mouseleave",
	  () =&gt; {
		container.classList.remove("blue");
	  },
	  false
	);</pre>
</body>
</html>