Quiz

What results are we supposed to see in the console with the keyup handler? Nothing seemed to happen when I typed in random keys?

Hmm. It worked for me on all three browsers. I'll demo.
After reading, I'm still confused about how keyboard events work on the webpage and how to get it work in the console. Can we do more demonstration in class? Thanks!

For sure.
Can we review the definitions of events, event listeners, handlers, etc? I'm having trouble remembering what does what.
Sure.
- event: something that happens, such as:
  - a button or hyperlink being clicked
  - a key being pressed
  - a form being submitted
  - the mouse being moved
  - an Ajax request completing
  - others... See MDN Events
- handler: a function that is invoked when an event happens.
- event listener: same as a handler
So, there's really one two things to remember.
what does method .one( ) do?
That's one of several methods that my bounds plug-in defines. The purpose is to check that a selector works correctly. The one() method checks that there is exactly one thing in the wrapped set and throws an error if there isn't.
```
$("#mybutton").click(myHandler);  // normal JQ; correct example
$("#mybuton").click(myHandler);  // normal JQ; bug but no ERROR message
$("#mybutton").one().click(myHandler);  // w/ my plugin; correct example
$("#mybuton").one().click(myHandler);  // w/ my plugin; bug causes ERROR message
```
The error message is the goal. Without it, debugging is harder because you don't know where the error is.
Please give a bit more examples on event handler and event listener!
Not really, because they're all the same. For Zodiac, there is one button. For RPS, there are 3. For Sliding tiles, there are 4 or 8 key handlers. For Concentration, there are 16 buttons. For quizzes, there are many pairs of buttons. For Jelly Blobs, there is mouse movement. For shopping lists, there are Ajax requests. So, it's variations on just a few themes.
Think about websites you're familiar with. Pretty much everything is done by some kind of button, right?

So, the examples above cover most of this course, except for concepts we haven't gotten to yet.

Some generic examples:
```
$("selector").click(myHandler); // named function
$("selector").click(function () { ... } ); // normal anonymous function
$("selector").click(() => ... ); // normal arrow function
```
The JQ click method is shorthand for on:
```
$("selector").on('click', myHandler); // named function
$("selector").on('click', function () { ... } ); // normal anonymous function
$("selector").on('click', () => ... ); // normal arrow function

$("selector").on('keyup', myHandler); // keyup event
$("selector").on('submit', myHandler); // form submission event
```

Can you explain a little more what a closure is and why it's important that we know what they are and are able to identify them?

Sure. A closure is a function that "remembers" something from its environment. The functions returned from quadratic all remember their original constant and roots. The thumbnail handlers in Ottergram: each remembers the thumbnail it is attached to.
These are important because they come up all the time in web programming.
You can identify them because they refer to variables that are non-local and non-global. Again, like the roots for a quadratic or the thumbnail for an Ottergram thumbnail handler.
why if a closure is returned from a function, it can continue to refer to its original environment? (the quadratic example) ----does the question make sense?

The question makes sense, but I don't think you really want me to get into how the closure is implemented.
Essentially, the language implementation (here JavaScript, but closures are in other languages as well) has to notice the closure variable and create a data structure connected to the function where that closure variable lives.
I'm still confused about what closures actually are and their syntax.
Their syntax is no different from other functions, except that the (1) have to be defined inside some context, and (2) refer to variables defined in that context.
```
function outer (a) {
    let b = 5;
    return function inner () { return a+b }
}
```
The inner function is a closure. Doesn't matter whether it's returned or not, but as long as it lives, it can refer to a and b.
I'm still confused about what exactly closures are. Is there another way you can explain it in class or do an example? / Can you cover closures and closure variables again?

I'll give some more examples.
Be patient with yourselves. It took me a while to wrap my head around closures when I first encountered them, and I learned them in grad school, after I'd been programming for years and years.