Javascript jQuery Event Performance MVC

Question

I was reviewing a Javascript application for performance, the application is built with spine.js and underscore js (acting as template engine). There is one common EventManager.js which handles all events in the application (by jQuery 'on' event handling on body element, please see the snippet below) and then application has its own publish subscribe mediator delegation to all the modules, it filters the events and then sends to all modules, by filtering the target and publishes internal event to module.

Event for a mouse move the event is being handled on the event manager, so any mouse move will be handled by the event manager instead of just handling mouse move on a specific div element. I think there is too many functions going on.

For example: the click event on a div is handled by module like module.subscribe("App-Click", onModuleClickHandler, filter: { selector: '#someSelector'). if that selector is clicked then eventmanager checks if the current target has that selector, then it publishes the custom "App-Click" to that module.

Is it good to handle like this or just handle on the submodule with the events on them for each html instead of common event manager? Please comment if any part of the question is vague and I will update that part in more detail.

The following is the snippet of eventManager:

$('body')
    .on('mousedown',   onMouseEvent)
    .on('mouseup',     onMouseEvent)
    .on('mouseover',   onMouseEvent)
    .on('mousemove',   onMouseEvent)
    .on('mouseout',    onMouseEvent)
    .on('click',       onMouseEvent)
    .on('mousewheel',  onMouseWheelEvent);

Answer 1

Event propagation on DOM uses sinking/bubbling with sinking(capture) and bubbling phases. Your event manager shall in principle implement this too as it quite flexible and practical.

But it is not clear why would you need to implement this by your own. It is there already.