Q:

When to pass event as parameter in functions (Javascript)?

I am new to Javascript events I encountered many examples in which event is passed as a parameter to the function. So is it mandatory to pass event to each and every function and when not to pass it. As in below code event is passed in 2nd function. I am confused when to pass and when to not pass ?
var elem = document.getElementById('my-elem');
elem.addEventListener('click', function(){
  //the element has been clicked... do stuff here
}, false);

$('#my-elem').click(function(e) {
  //the element has been clicked... do stuff here
});

A:

You don't pass the event, it is done automatically by the browser in all standard event triggers. The question is do you need to receive the event as a named argument in all your functions and the answer to that is, it all depends on whether you are going to want to use it:
When you will need access to the event:
element.addEventListener("click", foo);

// You can explicitly declare a function argument that will represent
// the event object that is automatically passed to you by the browser
function foo(evt){
  // And, then you can access the event in the function
  evt.xyz...
}

When you won't need access to the event:
element.addEventListener("click", foo);

// The event is still passed to the function, but now, you don't
// have an explicit way to access it:
function foo(){

}

Again, the event will be passed in all circumstances, so it's not going to improve or decrease performance if you decide to capture the reference with an argument. As a general rule of thumb to get started, it's probably a good idea to get into the habit of adding a named argument for it, so that if you need access to it, you can get it easily.

