A quick pure JavaScript implementation that allows to add an event listener that also works on elements dynamically created. The functionality is similar to jQuery.on().

The minified library has only 806 Bytes.

You should use focusout event instead of blur, as the blur event does not bubble.

Include the library and call addDynamicEventListener to create a new event listener.

<script src="dynamicListener.min.js"></script>
<script>
// Any `li` or element with class `.myClass` will trigger the callback, 
// even elements created dynamically after the event listener was created.
addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
    console.log('Clicked', e.target.innerText);
});
</script>

Note: You will have to use event.delegatedTarget in your callbacks to get the element that matches the selector (as event.target could be a child of this element and event.currentTarget is the root on which the listener was attached to).

• Void

Same as addEventListener (consider it to be IE9+).

The script uses the Element.matches() method to test the target element against the given selector. When an event is triggered the callback is only called if the target element matches the selector given.

No restrictions. Feel free to use it in any project you want.

Self-hosted analytics plaform with heatmaps and full session recordings.