valdrinkoshi/shadydom-listeners.html

## shadydom-listeners.html
<!doctype html>
<html>

<head>
  <script>
    ShadyDOM = {
      force: true
    };
  </script>
  <script src="shadydom.min.js"></script>
</head>

<body>

  <script>
    setTimeout(function() {
      startTest(document.body, 4);
    }, 100);

    function startTest(el, count) {
      let i = 0;
      const callbacks = generateCallbacks(logEventType, 1000, 2);
      const interval = setInterval(function() {
        addEventListeners(el, callbacks);
        setTimeout(function() {
          removeEventListeners(el, callbacks);
        }, 50);
        if (++i === count) {
          clearInterval(interval);
        }
      }, 200);
    }

    function addEventListeners(el, callbacks) {
      console.time('addEventListeners');
      for (let i = 0; i < callbacks.length; i++) {
        el.addEventListener('test-event-' + i, callbacks[i]);
      }
      console.timeEnd('addEventListeners');
    }

    function removeEventListeners(el, callbacks) {
      console.time('removeEventListener');
      for (let i = 0; i < callbacks.length; i++) {
        el.removeEventListener('test-event-' + i, callbacks[i]);
      }
      console.timeEnd('removeEventListener');
    }

    function generateCallbacks(originalCb, length, newCallbackEach) {
      const callbacks = [];
      let cb;
      for (let i = 0; i < length; i++) {
        if (i % newCallbackEach === 0) {
          cb = originalCb.bind();
        }
        callbacks.push(cb);
      }
      return callbacks;
    }

    function logEventType(event) {
      console.log(event.type);
    }
  </script>
</body>

</html>
	<!doctype html>
	<html>

	<head>
	<script>
	ShadyDOM = {
	force: true
	};
	</script>
	<script src="shadydom.min.js"></script>
	</head>

	<body>

	<script>
	setTimeout(function() {
	startTest(document.body, 4);
	}, 100);

	function startTest(el, count) {
	let i = 0;
	const callbacks = generateCallbacks(logEventType, 1000, 2);
	const interval = setInterval(function() {
	addEventListeners(el, callbacks);
	setTimeout(function() {
	removeEventListeners(el, callbacks);
	}, 50);
	if (++i === count) {
	clearInterval(interval);
	}
	}, 200);
	}

	function addEventListeners(el, callbacks) {
	console.time('addEventListeners');
	for (let i = 0; i < callbacks.length; i++) {
	el.addEventListener('test-event-' + i, callbacks[i]);
	}
	console.timeEnd('addEventListeners');
	}

	function removeEventListeners(el, callbacks) {
	console.time('removeEventListener');
	for (let i = 0; i < callbacks.length; i++) {
	el.removeEventListener('test-event-' + i, callbacks[i]);
	}
	console.timeEnd('removeEventListener');
	}

	function generateCallbacks(originalCb, length, newCallbackEach) {
	const callbacks = [];
	let cb;
	for (let i = 0; i < length; i++) {
	if (i % newCallbackEach === 0) {
	cb = originalCb.bind();
	}
	callbacks.push(cb);
	}
	return callbacks;
	}

	function logEventType(event) {
	console.log(event.type);
	}
	</script>
	</body>

	</html>