What are events?

Code that is executed non-linearly when something happens

DOM Events


			<button>Click me</button>


			let button = document.querySelector("button");
			button.addEventListener("click", function handler(event) {
				event.target.textContent = "Thank you 😊";
			});

Events allow you to run code when something happens.
In JS, you attach event listeners with element.addEventListener, where element is a reference to your element in the DOM tree.
Its mandatory arguments are the name of the event as a string, and a function to be executed.
When the function is called, it will receive the Event Object as an argument, which contains information about what happened.
this in that function will refer to the element that you attached the event to.
You can find a list of available events on MDN

Not only element-related

Resource: error, load, unload, …
Network: online, offline
Window: message, close

Two ways to add events

<button id=button>Click me</button>


			button.addEventListener("click", evt => {
				evt.target.textContent += "😊";
			});

			button.addEventListener("click", evt => {
				evt.target.textContent += "✅";
			});

<button id=button>Click me</button>


			button.onclick = evt => {
				evt.target.textContent += "😊";
			};

			button.onclick = evt => {
				evt.target.textContent += "✅";
			};

Context in event listeners


		button.addEventListener("button", function(event) {
			console.log(this);
		});

The button
The event parameter
Window

What happens?


		<!DOCTYPE html>
		<title>Event caveats</title>
		<meta charset="UTF-8"/>
		<button>Click me</button>
		<script>
			let button = document.querySelector("button");
			button.addEventListener("click", evt => {
				evt.target.textContent = "Thanks 😊";
			});
		</script>

What happens?


		<!DOCTYPE html>
		<title>Event caveats</title>
		<meta charset="UTF-8"/>
		<script>
			let button = document.querySelector("button");
			button.addEventListener("click", evt => {
				evt.target.textContent = "Thanks 😊";
			});
		</script>
		<button>Click me</button>


		<!DOCTYPE html>
		<title>Event caveats</title>
		<meta charset="UTF-8"/>
		<script>
			document.addEventListener("DOMContentLoaded", () => {
				let button = document.querySelector("button");
				button.addEventListener("click", evt => {
					evt.target.textContent = "Thanks 😊";
				});
			});
		</script>
		<button>Click me</button>

DOMContentLoaded

Fires when the DOM has finished parsing but before linked resources have finished downloading.
Problem: If connection is slow, users may interact with elements before they are interactive.
Problem: The event only fires once. If your code runs after that, your events never get attached.

Removing events


		let handler = evt => evt.target.textContent = "😊";
		button.addEventListener("click", handler);
		button.removeEventListener("click", handler);

What happens when I click the button?


		<button id=button>Click me</button>


		button.addEventListener("click", evt => {
			evt.target.textContent = "💩"
		});
		button.removeEventListener("click", evt => {
			evt.target.textContent = "💩"
		});

Its text is changed to 💩
Nothing

To remove a function, you need to store a reference to it. Just specifying the same anonymous function doesn't work, because these are different objects.

Three ways to provide feedback

Javascript CSS Result

<button id=button>Tickle me</button>


						button.addEventListener("mouseover", evt => {
							evt.target.style.background = "hsl(330, 100%, 50%)";

							button.addEventListener("mouseout", evt => {
								evt.target.style.background = "";
							}, {once: true});
						});

<button id=button>Tickle me</button>


						button.addEventListener("mouseover", evt => {
							evt.target.classList.add("hovered");

							button.addEventListener("mouseout", evt => {
								evt.target.classList.remove("hovered");
							}, {once: true});
						});


						button.hovered {
							background: hsl(330, 100%, 50%);
						}

<button id=button>Tickle me</button>


						button:hover {
							background: hsl(330, 100%, 50%);
						}

First attempt


		document.addEventListener("mousemove", evt => {
			let x = 100 * evt.x / innerWidth;
			let y = 100 * evt.y / innerHeight;
			document.body.style.backgroundImage = `radial-gradient(
				at ${x}% ${y}%,
				black,
				transparent
			)`;
		});

CSS for presentation, JS for computation


		body {
			background-image: radial-gradient(
			  at calc(var(--mouse-x, .5) * 100%)
			     calc(var(--mouse-y, .5) * 100%),
			  transparent, black
			);
		}


		document.addEventListener("mousemove", evt => {
			let x = evt.x / innerWidth;
			let y = evt.y / innerHeight;
			let root = document.documentElement;
			root.style.setProperty("--mouse-x", x);
			root.style.setProperty("--mouse-y", y);
		});

Separation of concerns

Avoid manipulating CSS properties from JS
If you're applying static styles, just toggle a class
If the styles are dynamic, set CSS variables
Set CSS variables to pure data, not CSS values like "10px" or "50%"

Raw input events

state transition in the input hardware

Input Event	Javascript event
Key pressed or released	`keydown`, `keyup`
Mouse moved	`mousemove`
Mouse button pressed or released	`mousedown`, `mouseup`

Translated events

Higher level events from raw events

Input Event	Javascript event
Clicking	`click`
Double-clicking	`dblclick`
Character held down	`keypress`
Form element value changed	`input`
Entering or exiting an object’s bounding box	`mouseenter`, `mouseleave`

Click = mousedown + mouseup?


		<button id=button1>Button 1</button>
		<button id=button2>Button 2</button>


		let handler = evt => {
			evt.target.textContent += "✅";
		};

		button1.addEventListener("click", handler);
		button2.addEventListener("mousedown", evt => {
			evt.target.addEventListener(
				"mouseup",
				handler,
				{once: true}
			);
		});

Input event: Which events?


			<textarea id=tweet></textarea>
			<span id="output"></span>


			tweet.addEventListener("input", evt => {
				output.textContent = evt.target.value.length;
			});

Translated events are usually more complex than they appear
Use them instead of rolling your own!

Event object


		document.addEventListener("mousemove", evt => {
			document.body.textContent = `${evt.x} ${evt.y}`;
		});

Event object

Metadata about the event

target element
mouse position
mouse button
keyboard modifiers
keys pressed
…and many others

Naïve dragging


		let start = {x: 0, y: 0};
		element.addEventListener("mousedown", evt=> {
			start.x = start.x || evt.x;
			start.y = start.y || evt.y;

			let mousemove = evt => {
				evt.target.style.left = (evt.x - start.x) + "px";
				evt.target.style.top = (evt.y - start.y) + "px";
			};
			evt.target.addEventListener("mousemove", mousemove);
			evt.target.addEventListener("mouseup", evt => {
				evt.target.removeEventListener("mousemove", mousemove);
			});
		})

Event coalescing

Events are not fired for every pixel of movement — that would be expensive!
Mouse moves are coalesced into a single event in queue
Same with scrolling

Dragging, revisited


		{
			let start = {x: 0, y: 0};
dragme.addEventListener("mousedown", evt=> {
	start.x = start.x || evt.x;
	start.y = start.y || evt.y;
	let target = evt.target;

	let mousemove = evt => {
		target.style.left = (evt.x - start.x) + "px";
		target.style.top = (evt.y - start.y) + "px";
	};
	document.addEventListener("mousemove", mousemove);
	document.addEventListener("mouseup", evt => {
		document.removeEventListener("mousemove", mousemove);
	});
});
		}

What do I get when I click on "me"?


			<button id=button>Click <mark>me</mark>!!</button>


			button.addEventListener("click", evt => {
				evt.target.innerHTML += "🦄";
			});

But… we only had a listener on `<button>`!

If a tree falls in a forest and no one is around to hear it, does it make a sound?

Events occur whether we listen to them or not

Event bubbling Events start off at a target, and propagate up the DOM tree

What do I get when I click on "me"?


			<button id=button>Click <mark>me</mark>!!</button>


			button.addEventListener("click", function(evt) {
				this.innerHTML += "🦄";
			});

`this` points to the element the listener was attached to, not the event target

Event bubbling

Mostly helpful

Inline formatting does not break our event handling
Event delegation: handle multiple elements at once at an ancestor

Event delegation


			<ol id="palette" class="items">
				<template>
				<li class="item">
					<input type="color">
					<button class="delete">🗑</button>
				</li>
				</template>
			</ol>
			<button id="addColor" class="add-item">
				Add item
			</button>

addColor.addEventListener("click", evt => {
	let template = palette.querySelector("template");
	let item = template.content.cloneNode(true);
	let del = item.querySelector(".delete");
	del.addEventListener("click", e => {
		e.target.closest(".item").remove();
	});
	palette.append(item);
});

document.addEventListener("click", evt => {
	if (evt.target.matches(".item .delete")) {
		evt.target.closest(".item").remove();
	}
	else if (evt.target.matches(".items + .add-item")) {
		let list = evt.target.previousElementSibling;
		let template = list.querySelector("template");
		let item = template.content.cloneNode(true);
		list.append(item);
	}
});

Event delegation

Decoupling: Event-handling code separate from element creation code
Interactivity available immediately
Performance: one listener instead of many

When bubbling is a problem…


			<button id=button1>Click <em>me</em>!</button>
			<button id=button2>No, click <strong>me</strong>!</button>
			<span id=output></span>


			let over = evt => output.innerHTML = evt.target.innerHTML;
			let out = evt => output.innerHTML = "";
			button1.addEventListener("mouseover", over);
			button2.addEventListener("mouseover", over);
			button1.addEventListener("mouseout", out);
			button2.addEventListener("mouseout", out);

Not all events bubble
Bubbling is just another heuristic!

focus (but focusin does!)
blur (but focusout does!)
mouseenter (but mouseover does!)
mouseleave (but mouseout does!)
load
error


		element.addEventListener(eventName, evt => {
			if (evt.bubbles) {
				evt.stopPropagation();
			}
		})

Event capturing Events start off at `document` and propagate down to target


			element.addEventListener(
				eventName,
				callback,
				{capture: true}
			)

What happens when you press `⌘`+`S` (or `Ctrl` + `S`) in Google Docs?

<h2>Assignment 8</h2>

<nav>
			<ul>
				<li><a href="#exercise-1-user-testing-of-your-chatmessaging-app-paper-prototypes-20">Exercise 1: User testing of your Chat/Messaging App paper prototypes (20%)</a></li>
				<li><a href="#exercise-2-iterate-and-implement-a-balsamiqfigma-mockup-of-your-chatmessaging-app-30">Exercise 2: Iterate and implement a Balsamiq/Figma mockup of your Chat/Messaging App (30%)</a></li>
				<li><a href="#exercise-3-js-for-calculator-47">Exercise 3: JS for Calculator (47%)</a></li>
				<li><a href="#exercise-5-hw7-feedback-3">Exercise 5: HW7 Feedback (3%)</a></li>
				<li><a href="#submission">Submitting your homework</a></li>
			</ul>
		</nav>
		<section>
			<h3 id="exercise-1-user-testing-of-your-chatmessaging-app-paper-prototypes-20">Exercise 1: User testing of your Chat/Messaging App paper prototypes (20%)</h3>
			<p>For this exercise you will be user testing your Chat/Messaging App paper prototype from <a href="../hw7/#exercise-2-paper-prototype-a-chatim-app-20">HW7 Exercise 2</a>. This should start to feel familiar by now. You previously user tested your calculator paper prototypes in <a href="../hw6/#exercise-2-user-testing-of-your-paper-prototypes-20">HW6 Exercise 2</a>.</p>
			<p>Prepare for the user test by writing a list of three tasks for your user to perform with your paper prototype. (e.g. a task could be a certain expression you want your users to try and calculate). During the study you will ask your participant to perform three tasks. Your paper prototype is static but you can simulate interactivity for your test subjects by explaining what would happen if it were interactive. Your explanation can be verbal, but it can also include physically modifyin your paper prototype using post it notes, index cards, or pencil markings. While the user is performing tasks, try to jot down notes about their behavior and questions. These will be helpful for recalling insights in your writeup.</p>
		</section>

<section>
			<h3 id="exercise-2-iterate-and-implement-a-balsamiqfigma-mockup-of-your-chatmessaging-app-30">Exercise 2: Iterate and implement a Balsamiq/Figma mockup of your Chat/Messaging App (30%)</h3>
			<p>After performing some user testing on your paper prototype from <a href="#exercise-1-user-testing-of-your-chatmessaging-app-paper-prototypes-20">Exercise 1</a>, create a high fidelity balsamiq/figma mockup that includes at least three changes to address issues testers had with your low fidelity prototype. This mockup must <strong>look like</strong> your intended user interface but need not provide the functionality.</p>
		</section>
		<section>
			<h3 id="exercise-3-js-for-calculator-47">Exercise 3: JS for Calculator (47%)</h3>

<p>In this part of the assignment you will be using Javascript to add functionality to you the HTML & CSS prototype calculator you created in <a href="../hw7/#exercise-4-htmlcss-mockup-of-calculator-25">HW7 Exercise 4</a>. You do not
				need to use all of the HTML & CSS code from your prototype in your final submission and you can modify your HTML & CSS code as you see fit. But keep in mind the feedback you got in your user testing sessions as you add
				functionality and make design changes.</p>

<p>Your final submission should be able to accomplish the following tasks as a minimum.</p>
			<ul>
				<li>Perform basic arithmetic (<code>+, -, *, /</code>).</li>
				<li>Allow the user to express grouping. For example, to calculate an expression such as <code>(1 + 2) * 3</code>.</li>
				<li>Provide the ability to store and recall value(s).</li>
				<li>Give the user the ability to perform at least 3 tasks beyond basic arithmetic. For example calculating an exponent, a logarithm, or a trigonometric function.</li>
			</ul>
			<p>We encourage you to be creative and go beyond the basic functionality outlined here.</p>
		</section>

<section>
			<h3 id="exercise-5-hw7-feedback-3">Exercise 5: HW7 Feedback (3%)</h3>

<p>Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, recitations etc.</p>
			<p>Please go to this <a href="https://docs.google.com/forms/d/e/1FAIpQLSdC85jimkHTN94FoKvLyhmNdJ1BjxAuJrY0cw2iYVpROe-j3w/viewform">google form</a> and answer its questions.</p>
		</section>

<h3 id="submission">Submitting your homework</h3>
		<p>Similar to the previous assignments, we are going to use Github Classroom again. <a href="https://classroom.github.com/a/z8WVpkOs">Authorize Github Classroom here</a> and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.</p>

Let's write a script that scrolls local links smoothly instead of abruptly jumping to the elements they target!

First, we prevent the default action with evt.preventDefault()
Then we scroll to the element smoothly with dest.scrollIntoView({behavior: "smooth"});
Exercise: Also modify the URL accordingly using the History API

Preventing default actions
You can, but should you?

No hard and fast rule
Match user expectations
Don't remove feedback without replacing it
For keyboard shortcuts:
- Probability of app action vs browser action
- Compromise: Opt-in or opt-out

Don't be annoying

Name: <input id=textfield>


		textfield.addEventListener("keypress", evt => {
			if (evt.key < "A" || evt.key > "Z") {
				evt.preventDefault();
			}
		});

Some events cannot be prevented

unload (but beforeunload can!)
input (but its composite raw events can!)
scroll
select (use user-select: none;)
fullscreenchange
resize


		element.addEventListener(eventName, evt => {
			if (evt.cancelable) {
				evt.preventDefault();
			}
		})

What happens?

<input id="name" />


			name.addEventListener("input", evt => {
				console.log(evt.target.value);
			});

			name.value = "Lea";

The console logs "Lea"
Nothing

Synthetic events


		name.addEventListener("input", evt => {
			console.log(evt.target.value);
		});

		name.value = "Lea";

		let evt = new InputEvent("input");
		name.dispatchEvent(evt);

We can also make our own events!


		let evt = new CustomEvent("itemadded", {
			detail: {item: item}
		});
		list.dispatchEvent(evt);

Custom events on custom objects!


		class GithubAPI extends EventTarget {
			constructor() {
				super();
			}
			login() {
				// ...
				let evt = new CustomEvent("login");
				this.dispatchEvent(evt);
			}
		}

		let github = new GithubAPI();
		github.addEventListener("login", evt => {
			// display user info
		});

What are events?

DOM Events

Not only element-related

Two ways to add events

Context in event listeners

What happens?

What happens?

DOMContentLoaded

Removing events

What happens when I click the button?

Three ways to provide feedback

What about this?

First attempt

CSS for presentation, JS for computation

Separation of concerns

Click = mousedown + mouseup?

Input event: Which events?

Translated events are usually more complex than they appear Use them instead of rolling your own!

Event object

Naïve dragging

Event coalescing

Dragging, revisited

What do I get when I click on "me"?

But… we only had a listener on <button>!

Events occur whether we listen to them or not

Event bubbling Events start off at a target, and propagate up the DOM tree

What do I get when I click on "me"?

this points to the element the listener was attached to, not the event target

Event delegation

When bubbling is a problem…

Not all events bubble Bubbling is just another heuristic!

Event capturing Events start off at document and propagate down to target

What happens when you press ⌘+S (or Ctrl + S) in Google Docs?

Preventing default actions You can, but should you?

Don't be annoying

Some events cannot be prevented

What happens?

Synthetic events

We can also make our own events!

Custom events on custom objects!

Translated events are usually more complex than they appear
Use them instead of rolling your own!

But… we only had a listener on `<button>`!

`this` points to the element the listener was attached to, not the event target

Not all events bubble
Bubbling is just another heuristic!

Event capturing Events start off at `document` and propagate down to target

What happens when you press `⌘`+`S` (or `Ctrl` + `S`) in Google Docs?

Preventing default actions
You can, but should you?