Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
kamaboko

Chapter 8. Regarding Obj.addeventlistener()

Recommended Posts

Hello,

 

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

K

Share this post


Link to post
Share on other sites

I don't have the book, or code, in front of me, so I'm guessing a bit, but I believe the answer is that obj won't always refer to the entire document, that it could refer to any object within the DOM. 

Share this post


Link to post
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.

Share this post


Link to post
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;

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...