this in IE

Energia · 01-17-2012, 02:21 PM

I am trying to understand how I can use "this" in IE. I am a little confused but if I understood the information I founded I understand that "this" in IE is not pointing at the element that couse the event but instead the object "window".

I tested the following code in an older version of IE and it did not work (but work in firefox, safari, chrome and IE 8 or 9 I think:

Code:

function addListeners(){	
	var els = document.getElementsByTagName('*'), divs = [];
	for(var i = 0; i < els.length;i++){		
    		els[i].id.indexOf("show") == 0 && divs.push(els[i]);
    		els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){	
	
      	for (var i = 0; i < divs.length;i++){		  
		  divs[i].style.display = 'none'
	}
	
      	document.getElementById('show' + this.id.split('link')[1]).style.display = 'block';
});
}
}

 window.addEvent(window,"load", addListeners, false);


 
function addEvent(element, eventType, theFunction, capture)
{

    if(element.addEventListener)
    {

        element.addEventListener(eventType, theFunction, capture);
    }

    else if(element.attachEvent)
    {

       element.attachEvent( "on" + eventType, theFunction);
     ("on" + eventType)
    }
}

HTML:

Code:

<div id="menu">

<ul>
<li id="event"><a id="link1"><img class="font" src="bilder/event_video.jpg" alt="Intercombio e turismo" width="204" height="204"></a></li>
<li id="foretag"><a id="link2"><img class="font" src="bilder/foretagsvideo.jpg" alt="Fic Intercombio" width="204" height="204"></a></li>
<li id="musikvideo"><a id="link3"><img class="font" src="bilder/musikvideo.jpg" alt="Intercombio e turismo" width="204" height="204"></a></li> 
<li id="reklam"><a id="link4"><img class="font" src="bilder/reklam_video.jpg" alt="Intercombio e turismo" width="204" height="204"></a></li> 
</ul>

</div>

<div id="show1" class="hide">
<p>TEXT</p>
</div>
<div id="show2" class="hide">
<p>TEXT2</p>
</div>
<div id="show3" class="hide">
<p>TEXT3</p>
<div id="show4" class="hide">
<p>TEXT4</p>
</div>

CSS

Code:

	#show1{
          width: 800px; font-size:14px;
	line-height: 20px;
	text-align: justify;
    margin: 0 auto;
           }	
	#show2{
          width: 800px; font-size:14px;
	line-height: 20px;
	text-align: justify;
    margin: 0 auto;
           }
	#show3{
          width: 800px; font-size:14px;
	line-height: 20px;
	text-align: justify;
    margin: 0 auto;
           }
		   
		#show4{
          width: 800px; font-size:14px;
	line-height: 20px;
	text-align: justify;
    margin: 0 auto;
           }
	.show{
             width: 800px;
			 display:block;}
			 
	.hide{
          display: none;
           }

My question is how you do instead of using "this" to make it work in all browsers?

DaveyErwin · 01-17-2012, 04:14 PM

You got this part messed up.
Maybe a bad copy and paste ?
for(var i = 0; i < els.length;i++){
els[i].id.indexOf("show") == 0 && divs.push(els[i]);
els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){

About the "this" difference between browsers
read here ...
http://ejohn.org/projects/flexible-javascript-events/

Energia · 02-01-2012, 01:01 PM

Thank you DaveyErwin for a great link! I have been studing and maybe I got it right now. But what did you meant was messed up here:
for(var i = 0; i < els.length;i++){
els[i].id.indexOf("show") == 0 && divs.push(els[i]);
els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){

It is an anonymous function. In the browsers I have testet it seams now to work in every browser (I hope):

Code:

function addListeners(){	
	var els = document.getElementsByTagName('*');
	divs = [];
	for(var i = 0; i < els.length;i++){		
    		els[i].id.indexOf("show") == 0 && divs.push(els[i]);
    		els[i].id.indexOf("link") == 0 && addEvent(els[i],"click", function(){	
	
      	for (var i = 0; i < divs.length;i++){		  
		  divs[i].style.display = 'none'
	}
	
      	document.getElementById('show' + this.id.split('link')[1]).style.display = 'block';
});
}
}

 window.addEvent(window,"load", addListeners, false);

 function addEvent( obj, type, fn ) {
   if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
     obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
     obj.attachEvent( 'on'+type, obj[type+fn] );
   } else
    obj.addEventListener( type, fn, false );
}

Even the code seam to work perfectly I don´t understand how function addEvent is fired off? When the window load and a click has happen the anonymous function show an element. Is it the loading of the window that make the function addEvent work?
I would appreciate if you would like to axplain the function for my own understanding.

DaveyErwin · 02-01-2012, 02:40 PM

Quote:

Originally Posted by Energia

I don´t understand how function addEvent is fired off? When the window load and a click has happen the anonymous function show an element. Is it the loading of the window that make the function addEvent work?
I would appreciate if you would like to axplain the function for my own understanding.

els[i].id.indexOf("link") == 0 && addEvent(els[i],"click",function ......

if the id of els[i] starts with link
the indexOf link is 0
then the part after && is evaluated
and the function addEvent is fired

Energia · 02-01-2012, 03:49 PM

Now I see it was embarrassing to ask, because it was clear in the code. But I think I have been staring and thinking about it too long time..!

Thanks for your teaching!

Quote:

Originally Posted by DaveyErwin

els[i].id.indexOf("link") == 0 && addEvent(els[i],"click",function ......

if the id of els[i] starts with link
the indexOf link is 0
then the part after && is evaluated
and the function addEvent is fired