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

  • 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

Event Propagation

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