The problem with events handling are, you don't actually know what needs to be done when the event trigger. Let's say you have 20 components, on counterChange, which of the 20 components need to be updated? And how? You can either do it the simple (and very inefficient), and it's React conceptually way by render all 20 of your components again with new value of counter, i.e.

    window.addEventListener('counterChange', () => {
        element.innerHTML = 20components.map(|c| c.renderHTML(newCounterValue)).join('');
    });

or, you have to check the components on case by case basis on a. if the component need to be updated or not, and b. how is the most efficient way to update such component. And in TFA, if counter is changed from odd to odd, the label doesn't need to be updated.

Also, multiply the number of events to the number of components can make the application go out of hand very quickly.