More Events in JS + Skeleton
File + DOM Manipulation
Lecture 7
Today’s Agenda
● Admin & Reminders
● Continue with JavaScript Events
● Dive into our JavaScript Skeleton File
● Introduce some new DOM manipulation
Even more JS Events
Event Handling
We can use JavaScript to attach functions to elements when an
event (e.g. "click") occurs.
To do so, we need to:
1. Identify the source element to listen for an event
2. Indicate the event to trigger a response
3. Specify the response function(s) to call when the event is
triggered.
Once we have this information, we can use addEventListener
to hook everything up!
Event handler syntax
What’s the difference between these two?
addEventListener("click", openBox);
addEventListener("click", openBox());
Event handler syntax
What’s the difference between these two?
addEventListener("click", openBox);
addEventListener("click", openBox());
addEventListener with multiple events
removeEventListener
Event Objects!
Recall that the event handler function can be attached to objects (window, DOM
elements, etc.)
source.addEventListener("click", responseFunction);
function responseFunction(e) {
// we can access the click Event object here!
}
When the event occurs, an Event object is created and passed to the event listener. You
can "catch" this event object as an optional parameter to get more information about the
event.
Example: event-objects.html
Common Types of JavaScript Events
Name Description
load Webpage has finished loading the document
scroll User has scrolled up or down the page
click A pointing device (e.g. mouse) has been pressed and released on an
element
dblclick A pointing device button is clicked twice on the same element
keydown Any key is pressed
keyup Any key is released
You can find a full list here
JS File Skeleton
JavaScript File Skeleton
/** 1. Strict mode
* Name, section, date, etc.
* Description of program 2. Module pattern
*/ 3. Load event
"use strict";
4. Alias functions
(function() {
window.addEventListener('load', init);
function init() {
// TODO: Your code here
}
function id() { /* TODO */ }
function qs() { /* TODO */ }
function qsa() { /* TODO */ }
})();
JavaScript “strict” mode
"use strict";
… your code …
Writing "use strict"; at the very top of your JS file turns on strict syntax checking:
● Shows an error if you try to assign to an undeclared variable
● Stops you from overwriting key JS system libraries
● Forbids some unsafe or error-prone language features
You should always turn on strict mode for your code in this class!
Example: strict.html
The “module pattern”
(function() {
Statements;
})();
Wraps all of your file's code in an anonymous function that is declared and immediately
called
0 global symbols will be introduced!
The variables and functions defined by your code cannot be accessed/modified externally
We'll use this pattern moving forward for all of our programs.
Example: module.html
Listening to the window “load” event
You can only access document element after the “load” event has fired
"use strict";
(function() {
window.addEventListener("load", init);
// no access to the document here
function init() {
// we now have access to the DOM tree!
// set up your initial document event handlers here.
}
})();
Example: load.html
Handy Shortcut Functions
We will use document.getElementById and document.querySelectorAll a LOT. It's handy to
declare a shortcut to help us out. You may use the following in your JS functions (these are
exceptions to the rule of having description function names).
function id(idName) {
return document.getElementById(idName);
}
function qsa(selector) {
return document.querySelectorAll(selector);
}
function qs(selector) { // less common, but you may find it helpful
return document.querySelector(selector);
}
We will start using these in examples (as well as gen for document.createElement which
we'll see soon)!
A Provided JS Template
We have provided a template you can refer to for the standard JS program structure
here. (Either copy the contents of script.js from the code tab, or "fork" the repl.it
after logging in.)
You are expected to replace the example functions and comment examples with your
own (you may use the same JSDoc comments for id, qs, and qsa as is though).
DOM Manipulation: Classes
Hiding/Showing Elements
How can we hide an HTML element?
.hidden {
display: none;
}
In JS, it’s possible to modify the style properties of an element directly
id("my-img").style.display = "none";
QUESTIONS for you:
1. What’s wrong with that?
2. How can we add/remove CSS classes with JS?
Hiding/Showing Elements
What do we mean by "hide"?
.hidden {
visibility: hidden;
}
QUESTIONS for you:
1. What’s the difference between display: none and visibility: hidden?
2. When might we want to use one vs. the other?
visibility:hidden vs. display:none.
visibility: hidden:
- The element still takes up space on the page, but is just "hidden" (cannot be seen)
display: none:
- The element is hidden by removing it from the page entirely. It's still in the DOM, but
the page will be rendered as if it isn't.
Modifying the classList
You can manipulate the DOM element’s classList with the following methods:
Name Description
add(classname) Adds the specified class(es) to the list of classes on this element. Any that
are already in the classList are ignored.
remove(classname) Removes the specified class(es) to the list of classes from this element. Any
that are already not in the classList are ignored without an error
toggle(classname) Removes a class that is in the list, adds a class that is not in the list.
contains(classname) Returns true if the class is in the the DOM element's classList, false if not.
replace(oldclass, Replaces the old class with the new class.
newclass)
End of lecture (the following slides were
skipped)
Skittles
Today, we’ll access DOM elements and manipulate text and class names via Skittles.
