Nochmal addEventListener & this

[mcmurphy]

Hi,
hatte das Problem schon mal hier im Forum beschrieben, aber da es leider nicht gelöst werden konnte und ich schon wieder damit konfrontiert werde probiere ich es nochmal es mit eurer Hilfe zu lösen:

Ich will jeden Link in einer Navigation eine Funktion zuordnen und dabei da altbekannte onclick="tu_was_mit_mir(this);" umgehen, bzw intelligenter lösen, indem ich jeden Link einen Eventlistener zuordne. Brauch aber eine Refernz auf das aufrufende Element. Mit Browsern klappt this wunderbar, aber IE sagt mit mir in der Funktion switchIt bei alert(obj) das obj ein Objekt ist (oh welch Wunder...), die Style quittiert er aber mit Objekt Error....

Warum bloß und kennt einer einen Workaround?

  window.onload = function(){
      try{
         var basisNode = document.getElementById("navi");               
         var links = basisNode.getElementsByTagName("a");
         var currentLink = null;
         for (var i=0; i<links.length; i++){ 
              if(links[i].addEventListener){// echte Browser
                    links[i].addEventListener('click', function(evt) {  switchIt(this);  }, false); 
                 }else if(links[i].attachEvent) {// für IE
                          links[i].attachEvent('onclick', function(evt){ switchIt(this); });
                 }
         }
       }catch(e){alert(e);}
 }
 function switchIt(obj){
    try{
       alert('wird aufgerufen' + obj);
       obj.style.backgroundColor = "red";
    }catch(e){alert(e);}
 } 

[onemorenerd]

function(evt) { switchIt(this); }
function switchIt(obj) { obj.style.backgroundColor = "red"; }

Du übergibst switchIt das Event Objekt, benutzt es dort aber, als wäre es ein DOM-Element.

So könnte es was werden:

function switchIt(evt) { obj = evt.srcElement; ... }

[php_fussel]

Warum arbeitest Du nicht z.B. mit jquery?! Dann brauchst Du Deinen Links nur eine Klasse zuweisen und kannst alle 'a'-Elemente einzeln ansprechen.

function switchIt()
{
    $("a.meineklasse").each( function () //Oder über div a.meineklasse, wenn sich die Links in einem div befinden ...
    {
        $(this).click( function (event)
        {
            /*event.preventDefault(); -->wenn Du den natürlichen Effekt des Links ausschalten willst*/
            
                       alert('wird aufgerufen' + event);
                        $(this).css("backgroundColor","red");

        });
    });    
}




$(document).ready(function()
{
       switchIt();
}); 

So in etwa (UNGETESTET) ... sollte auch mit dem IE funzen.

Gruß php_fussel

[mcmurphy]

THX, funktioniert mit IE....
dann brauche ich aber in der function switchIt noch ne Browserweiche, je nachdem was mir als Zeiger reintrudelt..., oder?

links[i].attachEvent('onclick', function(evt){ switchIt(evt); });
// IE klappt so, FF jetzt nicht
function switchIt(obj){
    try{
       obj = obj.srcElement;
       obj.style.backgroundColor = "red";
    }catch(e){alert(e);} 

habe ich dich richtig verstanden onemorenerd?

[mcmurphy]

Warum arbeitest Du nicht z.B. mit jquery?!

Demnächst, wollte auch einfach verstehen wie es auf der unteren Ebene (auf die JQuery ja auch aufbaut) funktioniert