need help with attachevent

[madoo]

I am running a function that dynamically creating divs and populates them from an xml file. what i have been trying to do is to add an onclick event to the divs so when one is clicked it would run a function. here is my code.

function loadlist()
{
var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
//specify xml source location
xmlDoc.async=false;
xmlDoc.load('videos/video_lists/movies/english/movielist.xml');
}

var x=xmlDoc.getElementsByTagName("MOVIE");
var i=0;

var outerNi = document.getElementById('outerDiv');
//loop to create the outer divs
for (i=0;i<x.length;i++)
{
var outerBoxDiv = document.createElement('div');
var outerId = 'movie'+i;
outerBoxDiv.setAttribute('id',outerId);
outerNi.appendChild(outerBoxDiv);
}


for (i=0;i<x.length;i++)
{
//go through the outer divs and place these divs under each one with specific id
var ni = document.getElementById('movie'+i);
var LOCATION=(x.getElementsByTagName("Location")[0].childNodes[0].nodeValue);
//create div for thumbnail
var imageDiv = document.createElement('img');
var imageId = 'image'+i;
imageDiv.setAttribute('id',imageId);
ni.appendChild(imageDiv);

//create div for title
var titleDiv = document.createElement('div');
titleId = 'title' + i;
titleDiv.id = titleId;
if(titleDiv.addEventListener)
{
titleDiv.addEventListener('click',test,false);
}else if (titleDiv.attachEvent)
{
titleDiv.attachEvent('onclick',test,true);
}

ni.appendChild(titleDiv);



}
function test()
{
alert(this.id);
}
}

the above code works for firefox but ie doesn't like this.id. it gives me undefined error. I saw somewhere else that i am supposed to use bindasevenetlistener() so the this would work but i am not sure how this is supposed to be done or if there is another way of doing this.

 

[BillyRayPreachersSon]

"bindAsEventListener" is a Prototype.js helper to make it easy to [effectively] set the context under which a functioin runs, i.e. it can set what 'this' is when accessed.

I suspect you're not using Prototype (otherwise you could replace your event attaching code with one "Event.observe" statement), so you shouldn' worry about using "bindAsEventListener".

What you really want to do is to use a better method of determining what was clicked inside your "test" function. Here's how you do that:

function test(eventData)  {
   var theElement = (window.event) ? event.srcElement : eventData.target;
   alert(theElement.id);
}

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tsuji]

[1] If you want to pass the element object directly to the handler (as this.id suggests), you can do this.

[1.1] Revise the handler test.
[tt]
function test(obj)
{
alert(obj.id);
}
[/tt]
[1.2] Then the main thing is to do the attachEvent/addEventListener right.
[tt]
if(titleDiv.addEventListener)
{
titleDiv.addEventListener('click',function(event){test(event.target);},false);
}else if (titleDiv.attachEvent)
{
titleDiv.attachEvent('onclick',function() {test(window.event.srcElement);});
}
[/tt]
[1.2.1] Your attachEvent is not exactly correct as it takes only two parameters. The third severs no purpose and will be ignored, and hencing misleading.

 

[madoo]

Thanks for the response. I tried both methods and for some reason i am still getting the last div's id. i tried classic dom for IE and wrote.
titleDiv.onclick = test;

that worked but is there any draw back for using an older format code?