zone.js listeners autocleanup

<!DOCTYPE html>
<html>

  <head>
    <script data-require="zone.js@*" data-semver="0.4.1" src="https://cdn.rawgit.com/angular/zone.js/v0.8.11/dist/zone.js"></script>
    <script data-require="zone.js@*" data-semver="0.4.1" src="https://cdn.rawgit.com/angular/zone.js/v0.8.11/dist/long-stack-trace-zone.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Hello Zone!</h1>
    Click "Events On" to attach listeners to buttons
    Click "Events Off" to detach listeners
    <button id="events-on">Events On</button>
    <button id="events-off">Events Off</button>
    
    
    <div style="margin-top: 20px">
      <button id="click-me">Click me</button>
      Counter: <span>0</span>
    </div>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

class TrackEventListenerSpec {
  constructor() {
    this.name = this.constructor.name
    this.properties = {
      eventTracker: this
    }
    this.tasks = []
  }
  
  onScheduleTask(delegate, currentZone, targetZone, task) {
    if (task.type === 'eventTask') {
      this.tasks.push(task)
    }
    
    return delegate.scheduleTask(targetZone, task)
  }
  
  cleanup() {
    this.tasks.forEach(task => Zone.current.cancelTask(task))
    this.tasks.length = 0
  }
}


function main() {
  const btn = document.getElementById('click-me')
  let i = 0
  
  btn.addEventListener('click', () => {
    btn.nextElementSibling.textContent = ++i
  }, false)
  
  document.getElementById('events-off').addEventListener('click', function() {
    this.previousElementSibling.disabled = false
    Zone.current.get('eventTracker').cleanup()
  })
}

document.getElementById('events-on').addEventListener('click', function() {
  this.disabled = true
  Zone.current.fork(new TrackEventListenerSpec()).run(main)
})

/* Styles go here */