Création d'un objet

class elHandler {

     constructor(el) { // pas de fx arrow
          this.el= el;
          
          this.init();
     }

    init = () => {
      this.el.addEventListener("click",
                event => this._action(event.type,this.el), false);
      return this;
     }
    
    _action = (type,el) => {
       console.log(` Handling + ${type} for ${el.id} `);
       el.classList.toggle("red");
       return this;
    }

};


let objDiv = new elHandler(document.getElementById("para1"));

Remarque : 


Examiner le code pour


class elHandler {

     constructor(el) { // pas de fx arrow
          this.el= el;
          
          this.init();
     }

    init(){
      this.el.addEventListener("click",
                event => this._action(event.type,this.el), false);
      return this;
     }
    
    _action = (type,el) => {
       console.log(` Handling + ${type} for ${el.id} `);
       el.classList.toggle("red");
       return this;
    }

};


var objDiv = new elHandler(document.getElementById("para1"));

Et finalement

class elHandler {

  constructor(el) { // pas de fx arrow
    this.el = el;

    this.init();
  }

  init() {
    this.el.addEventListener("click", function(event) {
      document.body.insertAdjacentHTML('beforeend', `<div id="two">this.ed = ${this.el}</div>`);
      this._action(event.type, this.el)
    }, false);
    return this;
  }

  _action = (type, el) => {
    el.classList.toggle("red");
    return this;
  }

};





Autre exemple :

const tableauQR = [
  ["Q1", function(){Array.from(document.querySelectorAll('.top ul, .top li'), el =>  el.classList.add('tmpExample'));}], 
 // ["clé2", "valeur2"]
];

// On utilise le constructeur Map
// pour transformer un tableau de clés/valeurs
// en un objet map
const QR = new Map(tableauQR);



class tmpExample {
    
     constructor(name) { // pas de fx arrow
       this.name = name;
     }
  
     reset = () =>  Array.from(document.querySelectorAll('#tmpSelection *'), el =>  el.classList.remove('tmpExample'));  
    
     ready = () =>

     Array.from(document.querySelectorAll('#tmpRecap a'),(el)=>el.addEventListener("click", (e) =>{
        e.preventDefault();
        this.findElements(el);    
     }    
      ))
     

  findElements = (el) =>
  {

    this.reset;
    
    switch (el.id)
    {
      case 'Q1':
      {
        QR.get("Q1")(); 
      }
    }
  }
};

let exo = new tmpExample("essai");
exo.ready();

test 1 question uniquement