Jump to content
Larry Ullman's Book Forums

Chapter 8. Regarding Obj.addeventlistener()

Recommended Posts



I'm been slaving over chapter 8 and have a question about obj.addEventListener().  I'm using firebug to walk through the code examples.  Does the obj in obj.addEventListener always refer to the engire 'document'?  Is there a case where it wouldn't?


Thanks for your input


Link to comment
Share on other sites

"obj" can refer to any valid DOM object, not just the document object.

With that said, there is often a huge performance benefit to attaching only one event listener to the document object and then checking the event target as opposed to setting up lots of individual event listeners for each of the actual DOM objects you want to listen to events for.

Link to comment
Share on other sites

Thanks for your replies.  I don't know what it is, but chapter 8 is absolutely killing me.  I've probably read it ten times, watched a ton YouTube videos on the subject, and the importance of tracking these events still mystifies me.  In particular, this code:

function reportEvent (e) {
    'use strict';

    // Get the event object:
    if (typeof e == 'undefined') e = window.event;

    // Get the event target:
    var target = e.target || e.srcElement;
Link to comment
Share on other sites

kamaboko, that code snippet in your previous post is designed to handle cross-browser variances.

Specifically, whenever an event occurs for a DOM object, the associated event listener method (i.e., function) is called, and the Event object is automatically passed to the event listener method as the first parameter.


Traditionally, people call this parameter "e", "evt" or something similar (because it's the Event object), but really, you can call it whatever you want.

Normally, that would be all you need to go about your merry way, but unfortunately, old versions of IE (<= IE8) do not support the Event object being passed to event listener methods.


As such, to make your code work in all browsers, you have to check if "e" is defined or not, and if it isn't, you know you're in old IE, in which case, you can then access the Event object via window.event.


Once you have the correct Event object, you then need to use that to get the correct event target, which, as you have probably guessed, has two ways of being accessed: the standard and the old IE way.


The standard way is Event.target, whereas old IE is Event.srcElement. (Note that Event in the previous sentence is the same thing as "e" in the code snippet.)


The last thing that might be causing you confusion is the || operator.

The || (logical OR) operator in JS allows you to quickly get a value by first checking the value to the left of the ||. If that value exists (i.e., it's not undefined, etc.), then that value is used. Otherwise, the value to the right of || is checked for its existence.

It's basically just a quick way of checking which value exists and assigning that to the variable.


That all make sense?

Link to comment
Share on other sites


  • Create New...