Defining JavaScript Event Object

Question

Why am I getting an error for this piece of code?:

function catchevent() 
{
    eventSrcID=(event.srcElement)?event.srcElement.id:'undefined';

    eventtype=event.type;

    status=eventSrcID+' has received a '+eventtype+' event.';
}

Firefox says that event is not defined. Actually, this is copied from here and it clearly says that it is for IE5. I use Firefox 3.6.13 on Ubuntu.

My Question is not why it doesn't work on my browser. Instead, is there a way to define event object, as suggested by the link, that would work for my browser?

UPDATE

Why isn't this working

<html>
<head>
<script>
function catchevent( e ) {
      // reference the proper event object
    var e = e || window.event;

      // reference the proper target
    var srcElem = e.target || e.srcElement; //line no 9

      // get the id of the target
    var eventSrcID = srcElem.id;

    alert(eventSrcID);
}
</script>
</head>
<body>
    <a id="link1" href="#" onclick="catchevent()">link1</a>
    <a id="link2" href="#" onclick="catchevent()">link2</a>
    <a id="link3" href="#" onclick="catchevent()">link3</a>

</body>
</html>

For this i am still getting error on line no 9

e is undefined
[Break On This Error] var srcElem = e.target || e.srcElement;

Now how do I need to pass event object on catchevent() or is there some mistake? please suggest.

I might suggest to use a guide less focused on an ancient browser with historically awful standards support. — sarnold
– sarnold, Commented Feb 20, 2011 at 4:30

user113716 · Accepted Answer · 2011-02-20 04:27:18Z

9

In Firefox and other W3C compliant browsers, the handler function will receive an event object as an argument to the function.

IE uses a global event object.

Here's a cross browser solution for your code.

function catchevent( e ) {
      // reference the proper event object
    var e = e || window.event;

      // reference the proper target
    var srcElem = e.target || e.srcElement;

      // get the id of the target
    var eventSrcID = srcElem.id;

      // get the event type
    var eventtype = e.type;

      // create the status string
    var status = eventSrcID + ' has received a ' + eventtype + ' event.';
}

You'll notice I used the var keyword when creating variables. You should do this, otherwise you're creating global variables.

Also note that the keyword this will be a reference to the element to which the handler was assigned.

answered Feb 20, 2011 at 4:27

user113716

323k64 gold badges454 silver badges441 bronze badges

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

3 Comments

Mark Eirich Over a year ago

+1 This is the correct answer. For more info, see quirksmode.org/js/introevents.html

S L Over a year ago

I tried your code and I am getting some error. please would you have a look at updates

user113716 Over a year ago

@experimentX: This is because you're using the inline onclick. Since W3C browsers don't have a global event object, you need to make sure it gets passed. Try changing your inline handlers to this: onclick="catchevent.call(this,event)" I haven't tested this on all browsers, but I think it should work.

DrStrangeLove · Accepted Answer · 2011-02-20 04:26:00Z

4

you forgot to pass event in parameters.

function catchevent(event) 
{
    eventSrcID=(event.srcElement)?event.srcElement.id:'undefined';

    eventtype=event.type;

    status=eventSrcID+' has received a '+eventtype+' event.';
}

answered Feb 20, 2011 at 4:26

DrStrangeLove

11.6k16 gold badges63 silver badges73 bronze badges

3 Comments

Mark Eirich Over a year ago

This may not be possible. For example, document.getElementById('foo').click = catchevent; - It would be up to the browser whether it gets passed, and this depends on which browser you're in.

DrStrangeLove Over a year ago

i guess you are right, but i assumed FF because experimentX said he used Firefox 3.6.13 on Ubuntu.

S L Over a year ago

anyway everyone was helpful, would you have a look at my updated code please

JAAulde · Accepted Answer · 2011-02-20 04:28:39Z

1

In Firefox, the first param passed to a handler is the event. So a cross browser piece of code would check for a param and use it if present. If not present, it would default to window.event, the IE way.

answered Feb 20, 2011 at 4:28

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

Comments

Martin Booth · Accepted Answer · 2011-02-20 04:29:40Z

1

The event object is a global variable in internet explorer. (Actually a property of the global window variable)

Firefox is simply a different design, and event is not a global variable in firefox. Instead, it is passed into the function (so you would need to change catchEvent() to accept a parameter:

function catchEvent(event){

Take a look at this artice because that is not the only problem you'll face with the event model:

http://www.quirksmode.org/js/introevents.html Quirksmode article

answered Feb 20, 2011 at 4:29

Martin Booth

8,59533 silver badges31 bronze badges

Collectives™ on Stack Overflow

Defining JavaScript Event Object

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related