Digging Deeper into Event Handling

The starter code for this activity is below.

Additional Reading on JavaScript Events:

Here's the starter code for this activity, create a file named events-sample-code.html and paste this code into it:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Events</title>
	<script type="text/javascript">
	
	// Wait until the page loads to execute your JavaScript code

	</script>
</head>
<body>
	<h1>Events</h1>
	<h1>JavaScript Event Object Sample Code</h1>
	<h2>Click Events</h2>
	<input type="button" id="btn1" value="Button 1">
	<br><br>

	<input type="button" id="btn2" value="Button 2">
	<input type="button" id="btn3" value="Button 3">
	<br><br>

	<h2>Mouse Move Events</h2>
	<p>You can 'listen' for when the mouse moves within the window, or within a certain element.</p>
	Mouse Position X:<input type="text" size="3" id="txtPageX" />
	<br/>
	Mouse Position Y:<input type="text" size="3" id="txtPageY" />
	<br><br>

	<h2>Keyboard Events</h2>
	<label>Enter some text:</label>
	<input type="text" id="txt1">
	<br><br>

	<h2>Form Events</h2>
	<form id="surveyForm" method="POST" action="https://webcoder.club/form-handler/">
		<label>Enter your first name:</label>
		<br>
		<input type="text" name="firstName" />
		<br>
		<label>Enter your age:</label>
		<br>
		<input type="text" name="age" />
		<br>
		<label></label>
		<input type="submit" value="submit" />
	</form>
	<br><br>

	<h2>Change Events</h2>
	Select a color:
	<br>
	<select name="color">
	    <option value="">Choose One...</option>
	    <option value="red">RED</option>
	    <option value="blue">BLUE</option>
	    <option value="green">GREEN</option>
	</select>
	<br><br>
	<label>
		<input type="checkbox" name="agree">
		Agree to our terms
	</label>
</body>
</html>