A general rule of thumb is one function should do one thing. As parts of a function get more complex it makes sense to break them out into smaller functions.
However when to do this is always a rule of thumb and something you will get a better hand for as you go on.
However, in general event listener functions should be their own function so the event listener can be removed if needed.
In the case of the functions that get an element and nothing else, yes, this pattern is shown just in case you have a code base that you do not want to have hardcoded reference to your markup. If your markup changes you only need to update a call to that class or id in one place.
I wouldn’t say you always have to do that, but it can be helpful for certain apps 🙂