I think it goes without saying that you should only include the JavaScript that you actually need. Any piece of code you don't need is just wasting processing power but whether it has a performance impact really depends on your markup / other code / etc.
Instead of worrying about performance, I would worry about maintainability. Do you really want to have only one large JavaScript file with all the code for all pages of your site? It will get messy eventually.
Regarding: $(".page").on("click", ".notes .add", function(){ ... });
. It really depends. The nice thing with event delegation is that it only binds one event handler to manage multiple elements.
Here, it binds the event handler only to .page
. But the handler is examining any click event originating from a descendant of .page
to see whether the element matches .notes .add
. It should be obvious that if there are no .notes .add
elements, this is just unnecessary computation.
But if instead the .page
element does not even exist, then the event handler won't even be bound, which is ok. jQuery will try to find .page
elements and will fail. Depending on the complexity of the selector, this can really have an impact (a class name is not complex though).