Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Using an object with addEventListener()">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Using an object with addEventListener()</title>
</head>
<body>
   <button class="click-button">Click</button>
   <input type="checkbox" class="last-time" value="1" />Last time
</body>
</html>
 
class Listener {
   constructor(element) {
      this.isLastExecution = false;
      this.element = element;
   }
   addClickListener() {
      this.element.addEventListener('click', this);
   }
   removeClickListener() {
      this.element.removeEventListener('click', this);
   }
   handleEvent(event) {
      console.log('Executed!');
      if (this.isLastExecution) {
         this.removeClickListener();
      }
   }
}
const clickButton = document.querySelector('.click-button');
const lastTimeCheckbox = document.querySelector('.last-time');
const myListener = new Listener(clickButton);
myListener.addClickListener();
lastTimeCheckbox.addEventListener('change', function() {
   myListener.isLastExecution = !myListener.isLastExecution;
   if (!myListener.isLastExecution) {
      myListener.addClickListener();
   }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
AurelioDeRosapro
0viewers