Confused about a couple of things when writing Event Handlers

Question

So I'm trying to gain advance Javascript skills. So I'm doing a practical JS tutorial on Lynda.com. Chapter 3 is on EventHandlers and I'm a little confused (Note: I've deleted the code that makes the script work in all browsers). I've rewatched the videos and that hasn't been helpful at all.

What is the e referring to? I don't have a variable at all named e or anything else that I can see.

What is false referring to? Is it the same as return false since I'm dealing with a link?

 function clickLink(e) {
    alert("You Clicked the Link");
 }

 function linkClicked(e) {
    addEventHandler(document.getElementById("clickLink"), "click", clickLink, false);
 }

 addEventHandler(window, "load", linkClicked, false);

agryson · Answer 1 · 2012-11-28T19:58:08.970

1

The e just refers to the event that has taken place, you can change it to anything you want. It just passes the event around to the various functions etc. that need to use it.
The false simply means that the event is not 'consumed', i.e. it can be used by other handlers if you have multiple handlers for the same event. So, yes, it is effectively the same as return false. (see my link below about bubbling)

See here for more on consuming events and bubbling.

edited Nov 28 '12 at 19:58

answered Nov 28 '12 at 19:51

agryson

297
2
9

Thank you both. That's kind of what I was thinking for both. But the last thing I want to do was assume. – deadendstreet Nov 28 '12 at 20:22
Good habit, assumption is, as they say, the mother of all f*ù$ups, don't forget to mark the answer you feel most complete as the good one to help out anyone else who comes across your question. :) – agryson Nov 28 '12 at 20:34

score 1 · Answer 2 · answered Nov 28 '12 at 20:29

1

First of all e is just an argument that you will receive in the function. You could also write something like this:

function evtHandler(){
    console.log(arguments[0]);
}

Where arguments[0] is your given e. The handler function is called when the event is fired. Usually in the e argument you have an object with some info about how fire the event.

When you add an event handler, the last argument on that function is a boolean one, which indicates if the handle should or shouldn't bubble in the event handler's chain. It is not as you would return false, but if the event would be handled by other handlers also. If you want to return false or ignore the previous default handling you could call the preventDefault function inside the evtHandler.

P.S. Take care with event handlers because there are some problems with cross-browser compatibility;

answered Nov 28 '12 at 20:29

helly0d

828
2
10
27

Thanks for the advice. In the video, it mentioned that this was the better was to handle it rather than just doing an onclick (which I'm very familiar with). Since there are cross-browser compatibility issues, would it be better to do it the way I learned...meaning add the onclick event within the a tag? – deadendstreet Nov 28 '12 at 21:09
@user1026521 Actually no because you said you want to gain advanced JS skills. First you should understand that inline code is kind of risky for huge applications. Second thing is that even if there is a compatibility problem it is solvable in 3 or maybe 4 lines of code. http://msdn.microsoft.com/en-us/magazine/ff728624.aspx And the main reason for doing this is to have access to the event's handle chain when using bubbling, plus the scalability of your code. – helly0d Nov 28 '12 at 21:16
@user1026521 By the way don't you want to change your username so we could call you something else than userXXXXXX ? It's just for the social part of this site. We are not in prison here you know? – helly0d Nov 28 '12 at 21:19

score 0 · Answer 3 · edited May 23 '17 at 11:51

if you are talking about e in clickLink(e), then i can say you can declare whatever parameter you want in a javascript function prototype,but when calling it you can provide parameters optionaly.and here in clickLink(e) you can pass a parameter for e or you can simply ignore it.and about the false in addEventHandler check this documentation also check this SO question .

for example if function FO is defined so:

function FO(e){
    //function body here
}

then you can call it like this :

 FO();

OR

 FO("BAR");

Confused about a couple of things when writing Event Handlers

3 Answers3