Problem with event listener

SUMMARY:
I have a web page where I'm trying to have the same area on the page get updated when each of 3 small album images gets clicked. When I used DOM Level 0 event handling, it worked fine. However, I am at the point where I want mutiple things to happen at the mouse click of the smaller images, so I am trying to use DOM Level 2 scripting using addEventListener/attachEvent.

There is still only one event happening per the "onclick" of the small images, so I'm just trying to get the event handling set up correctly.

PROBLEM
When I try to retrieve the event that was clicked from the event framework, the object looks empty, or rather, I'm not sure how to interpret the results. If I display the clicked object with an alert for evt.srcElement or evt.target I get this: [object HTMLImageElement]. Then when I try and get the id of the object that was clicked, which is an <a> element, there's nothing there.

Here's the web page in question (working on alignment): http://www.loamband.com/gid_test.php

If you click the 3 images on the left, you'll see the alert with the object target displayed.

I have the same issue in both IE and FF.

Any help is appreciated!

Have a try by element.getAttribute('id') method instead of just an element.id.

Have a try by element.getAttribute('id') method instead of just an element.id.

I tried that in the alert and all that comes back is blanks.

It seems like I'm not translating something from the event framework correctly, but I don't know what.

How about //var whichObj = getActivatedObject(evt);
var whichObj = evt.target;
//alert(evt.target);
url = whichObj.getAttribute('id') + "_data.php";
alert("url = " + url);
albumRequest.open("GET",url,true);

How about //var whichObj = getActivatedObject(evt);
var whichObj = evt.target;
//alert(evt.target);
url = whichObj.getAttribute('id') + "_data.php";
alert("url = " + url);
albumRequest.open("GET",url,true);

I tried this locally, and in FF, the alert URL shows "url = null_data.php". In IE there isn't an alert, only an error (I'm guessing because IE doesn't use target?).

Is there something wrong with the way I'm adding the event listeners when the page loads?

Ok, I believe this is fixed, but I'm not sure exactly why:

My code works locally when:

1) the IMG tags are taken out of the <a> elements.
2) I don't use an event handler for each <a> element. Previously I used:


linkelems = document.getElementById("bigcdimg").getElementsByTagName("a");

for (var i=0; i<linkelems.length; i++) {
if (linkelems[i].className == "cdlink") {
var theObj = linkelems[i];
//linkelems[i].onclick = getAlbumDetails;
addEventHandler(theObj, "click", getAlbumDetails);
}
}


This time, I wrapped the <a> tags in a DIV like so and removed the IMG elements inside the <a>'s:

<div id="bigcdimg">
<a href="#" id="gid" class="cdlink">Hello</a><br /><br />
<a href="#" id="amoeba" class="cdlink">amoeba</a><br /><br />
</div>

And then used this code for the event handling after the onload event:

var albumLinks = document.getElementById("bigcdimg");
addEventHandler(albumLinks, "click", getAlbumDetails);

If the IMGs are used as backgrounds in CSS, then the event handlers will work.

In debugging the original code, I found that the e.type variable was correctly being set to "click", but the target variable was coming back null.

I have no idea why this change works, but it does. I guess the lesson is, don't try to assign event handlers to <a> elements. They need to be assigned to a containing DIV or SPAN.

Anyone let me know if that's not accurate...

The <a> tag has a default behavior that links the current document to the URL placed in the href attribute. You might need to cancel it's natural behavior:

if (linkelems[i].className == "cdlink") {
var theObj = linkelems[i];
//linkelems[i].onclick = getAlbumDetails;
addEventHandler(theObj, "click", function(){getAlbumDetails;return false;});
}



Also, I'm not sure where you got addEventHandler, haven't found that on any JS documentation.

If you're attaching an event to an element, you should also add additional script for it to work on IE (attachEvent()).

That was my own function (I got from the Head First series) that handled the event listening for IE and other browsers.

Having been my first go-round with an Ajax script, it seemed like a good idea, but if there are better ways to do it, I would appreciate any suggestions.