Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using addEventListener to attatch dynamic functions

    Hi, I have the following code:
    Code:
    function addHandlers()
    {
    	var elementList = new Array();
    	elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
    	elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
    	elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
    	elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
    	for(var i = 0; i < elementList.length; i++)
    	{
    		var curNode = document.getElementById(elementList[i].parentId).firstChild;
    		var item = elementList[i];
    		
    		if(curNode)
    		{
    			/*if(curNode.addEventListener)
    			{
    				curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
    				curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
    			}
    			else if(curNode.attchEvent)
    			{
    				curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage)});
    				curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage)});
    			}
    			else
    			{
    				curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
    				curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
    			}*/
    			curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
    			curNode.onmouseout = makeCallback(item.parentId, item.regImage);
    		}
    	}
    }
    
    function makeCallback(parId, image)
    {
    	return function() {
    		changeImage(parId, image);
    	};
    }
    
    function changeImage(parId, image)
    {
    	document.getElementById(parId).firstChild.src = image;
    }
    The curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); works, but I want to use addEventListener and fallback to the other methods. I don't understand why the addEventListener and attachEvent parts doesn't work. Any ideas?
    Last edited by CoreyB.; 12-27-2011 at 02:01 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    			else if(curNode.attchEvent)
    It's not asking quite the right question...

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, after fixing the typo, it still doesn't work. I think the problem has something to do with passing parameters in the addEventListener and attachEvents.

    Code:
    function addHandlers()
    {
    	var elementList = new Array();
    	elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png"));
    	elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png"));
    	elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png"));
    	elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png"));
    	for(var i = 0; i < elementList.length; i++)
    	{
    		var curNode = document.getElementById(elementList[i].parentId).firstChild;
    		var item = elementList[i];
    		
    		if(curNode)
    		{
    			/*if(curNode.addEventListener)
    			{
    				curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false);
    				curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false);
    			}
    			else if(curNode.attachEvent)
    			{
    				curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage);});
    				curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage);});
    			}
    			else
    			{
    				curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage);
    				curNode["onmouseout"] = makeCallback(item.parentId, item.regImage);
    			}*/
    			curNode.onmouseover = makeCallback(item.parentId, item.hoverImage);
    			curNode.onmouseout = makeCallback(item.parentId, item.regImage);
    		}
    	}
    }
    
    function makeCallback(parId, image)
    {
    	return function() {
    		changeImage(parId, image);
    	};
    }
    
    function changeImage(parId, image)
    {
    	document.getElementById(parId).firstChild.src = image;
    }

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    makeCallback returns the the handler's address and therefore must be called:
    Code:
    curNode.addEventListener("mouseover",  makeCallback( item.parentId, item.hoverImage), false);

  • Users who have thanked Logic Ali for this post:

    CoreyB. (12-26-2011)

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh wow, I was going off of this where it says if you want to pass parameters, you have to use an anonymous function. I wonder why it works anyways...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •