Events

What are events?

What are events?

Event Types

• click
• dblclick
• keypress
• focus
• blur
• submit
• and more...

Events are attached to DOM Nodes

Finding Nodes, Attaching Events

Let's find a button, and set a counter

var btn = document.getElementById("counter");
var counter = 0;

And attach an eventListener

btn.addEventListener("click", function(){
    counter++;
    console.log("You've clicked this button "+counter+" times!");
});

Closures: Review

A function literal looks like this:

var sayHi = function(){
    console.log("hi");
}

It can be referenced without being invoked, and be invoked later

function runAnotherFunction(f) {
    f();
}

runAnotherFunction(sayHi);

Closures: Review

We can forgo the variable assignment and declare the function directly in the parameter

function runAnotherFunction(f){
    f();
}

runAnotherFunction(function() {
    console.log("what is happeningggggg");
});

Using Closures for Event Handlers

var btn = document.getElementById("counter");
var counter = 0;

btn.addEventListener("click", function(){
    counter++;
    console.log(counter + " clicks!");
});

When does the code run?

Event Types

So many events... 

• mouse events (MouseEvent): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu
• touch events (TouchEvent): touchstart, touchmove, touchend, touchcancel
• keyboard events (KeyboardEvent): keydown, keypress, keyup
• form events: focus, blur, change, submit
• window events: scroll, resize, hashchange, load, unload

JSBin

Event Propagation

What happens when you click an element when its parent is also listening for clicks?