0

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
});
Improve this question

5 Answers 5

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

If your question is which error handlers get an event object passed, the answer is all.

All functions you add via addEventListener or other libraries like in your example jQuery get an event object as first parameter.

However, JavaScript allows you to pass more arguments into a function than it actually takes. Therefore it’s no error to provide a function that does not take the event argument, as the function can still be called by the browser etc. the same way.

Improve this answer

Comments

0

No, You haven't to pass the event on the function.

You must get the element, and after call the function you want to applie on the element.

There is a small example to a function applied on a button.

$("#button1").on('click',function(){
  alert("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="button1">
click me
</button>

Improve this answer

Comments

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

you are not passing e (event) in this case, you are receiving it in your function. The browser will call this function with event as the first parameter when #my-elem is clicked. Your function receives this element as e. Once there you can see things like 

e.target

and so on.

Improve this answer

Comments

0

If you need to use it (such as to call stopPropagation() on it) then name it in your function. As idmean said, it will be passed whether or not you name it in your function definition. Because you are only declaring a callback, it is not you that is doing the "passing". You are passing a function. When that function is called, it will be called with an event parameter. If you name it:

function (e) {}

then you can access it with 

e.stopPropagation()

if not, you have to access it with the arguments object.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.