JavaScript Event handlers

So for this experiment I was intrigued by the continual functions run in a website,  or event handlers.   It took me a bit to figure out what exactly needed a time out, closure, all the stuff mentioned in this article:

Medium : front-end-javascript-interviews-in-2018-19

After a fair bit of searching I decided what I wanted my experiment to be in order to understand these concepts better.

I'm going to make my own 'event_handler'.

I've done it in python with Tkinter:
An experiment with Tkinter python blog post

Now most would say, "Why go to all the trouble of making something that exists?"

And my answer will 99% of the time be, "Because I want to know how it works."
For me the best way to learn that, is to try and make it happen myself the way the already existing thing works.   My dad would say something along the lines of, "You really learn how a carburetor works after you've (successfully) rebuilt one." 

Helpful links I used:
https://scotch.io/tutorials/understanding-hoisting-in-javascript 
w3schools switch
w3schools events
stackoverflow set-a-default-parameter-value-for-a-javascript-function 
StackOverflow exiting a function, javascript
StackOverflow javascript and/or/ not Operators 
w3schools Comparisons

There were a few more links, but I just included the most relevant ones.

When I started this, It was tiny bits at a time.   This was crashed re-written, pieces were maimed and mutilated and rebuilt one at a time until the whole thing worked like I wanted.

I'm not sure if I accomplished a good event handler, but I do believe I understand it better now.

picture of results:

Here's the final code:

#######  event _handler.js  #########


// First step is to find a website explaining event handlers
//  https://www.w3schools.com/js/js_htmldom_eventlistener.asp


// create in small chunks, run file to see that it works
// as expected

 
const readline = require('readline-sync');
// the function listener was actually the last bit to get working
// for the first few steps, this only console.logged the event and element
function listener(event, element=null) {
    let x = get_event(event, element);
    //console.log(x)
    if (x == 'listen'){
      event = readline.question("listening...");
      element = readline.question("what is your element? or null for none:\t")
      x = get_event(event, element);
      console.log(x);
      console.log("element-->  " + element);
      if(x != 'exit' && x!= 'quit'){
        //console.log("x does not equal exit")
        listener('listen');
      }
    }
    if (x == 'exit' | x=='quit' | x=='stop'){
      //console.log("x DOES equal exit")
      return;
    }


};


//create functions that do something for each item in events list:
function say_hello(){
  //console.log("retrieving say_hello()");
  var dothis = "say hello is activated";
  return dothis;
};

function base_click(){
  var dothis = "someone clicked it";
  return dothis;
};

function colorize(){
  var dothis = "applying the crayon";
  return dothis;
};

function grey_scale(){
  var dothis = "washing the crayon off.";
  return dothis;
};

// make a switch case function to return the item from list
function get_event(event, element){
  const events = ['click', 'say_hello', 'abort_color', 'add_color', 'listen'];
  if(events.indexOf(event) >= 0){ // <-- like pythons 'if item in list:'
    var to_do = 'exit'
    switch(event){
      case 'click':
        to_do = base_click();
        break;
      case 'say_hello':
        to_do = say_hello();
        break;
      case 'add_color':
        to_do = colorize();
        break;
      case 'abort_color':
        to_do = grey_scale();
        break;
      case 'listen':
        var to_do = 'listen'
    }
    return to_do
  }
  else{
    return 'exit'
  }
};

//test it:
//listener('abort_color')
//listener('click', 'optional arguement which element?')
//listener('add_color', 'blue')
//listener('say_hello', 'Nice to meet you!')
//final test with recurrsive behavior included in listener()::
listener('listen')