Multiple closure

2 things:

• The outerFunction returns an object which holds our two closure
• The two innerFunctions share theirs parent scope

Thanks to this capacity we can simulate a very simple statefull behavior

Exercice

Create a simple statefull counter that you can use in the browser's console

• Create a main function
• Create a local variable to hold the count
• Create 3 closures:
  • One to increment the counter
  • One to decrement the counter
  • One to log the value
• return an object containing the 3 closures
• test it inside an html file with the console

Mainstream closure error

function setupHelp() {
  var helpText = ... ;
  for (var i = 0; i < helpText.length; i++) {
    // item is declared in the setupHelp scope
    var item = helpText[i]; 
    // We create an anonymous inner function inside setupHelp
    // And we set this anonymous function as a property of a global object
    // Which means, it effectively become a closure
    document.getElementById(item.id).onfocus = function() {
      // This anon. func. will be called when the focus event is fired
      // Which means that the assignation will happen in the future
      // In that future, what is item ?
      document.getElementById('help').innerHTML = item.help;
    };
  };
};
setupHelp(); // We call setupHelp right Away

Item is the last element of our array helpText!

Mainstream closure error

We need to "save" the current state of item.

We will isolate our closure inside a scope containig the current state or the item variable

function makeHelpCallback(copiedItem) { 
  // copiedItem is local var, it only exists in this scope
  return function() { // This is an anonymous closure
     document.getElementById('help').innerHTML = copiedItem.help; 
  };
}

function setupHelp() {
  var helpText = ... ;
  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i]; 
    document.getElementById(item.id).onfocus = makeHelpCallback(item);
    // item has been passed has a parameter of the makeHelpCallback function
    // item has effectively been passed inside the makeHelpCallback function scope
  };
};
setupHelp(); // We call setupHelp right Away

Test it!

Event propagation

This the event workflow:

addEventListener("click", function(e) { // The event object is usually named `e`
  e.stopPropagation(); // We stop the propagation of the event
});

Test it!

Event Default

addEventListener("click", function(e) { // The event object is usually named `e`
  e.preventDefault();
});

Test it!

Keyboard events

When a key on the keyboard is pressed, your browser fires a "keydown" event

Exercice

Create a div capturing all the keyboards input

Help yourself with this

Mouse events

Every time the mouse pointer moves, a "mousemove" event fires.

This event can be used to track the position of the mouse.

Exercice

Display the current mouse position

Help yourself with this

Page events

When a page finishes loading, the "load" event fires on the window and the document body objects.

This also us to "defer" the execution of our scripts only when the whole page has loaded.

Remember that the content of script tags is run immediately when the tag is encountered.

var firstAttempt = document.querySelector("#after-script");
addEventListener("load", function(e) { // equivalent to window.addEventListener
  console.log("I've finished loading");
  var secondAttempt = document.querySelector("#after-script");

  console.log(firstAttempt, secondAttempt);
});

Test it!

Project: A Todo list

Start with the add an item feature

• In a file called app.js, create a local scope which holds
  • An array named todos
  • A function which can add item to the array todos
  • A function which can return the current array todos
  • A function which can delete an item of the array todos
• Require this file in your entry.js file

Project: A Todo list

Use two event listeners to link the two features (add/remove)

• One to the keyboard "enter key" event
• One to the mouse "left click" event
• Use your app methods in the different event listener callbacks

Think of a todo element as an object holding an id and a string