addEventListener und zugriff auf klassenvariable

[mcmurphy]

Hi,
habe nach längerer Zeit mal wieder ein Problem das ich alleine nicht in den Griff bekomme.
Ich baue mir gerade eine Klasse, welche mir, ausgehend von einem Basis Element, bei click auf einen Button ein (oder mehrere) <div>s erzeugen soll und bei einem Klick auf ein <a>, welches in ein div eingebettet ist dieses div wieder entfernen soll (klappt auch schon).

Also muß ich dem a bei onclick eine Funktion zuweisen
1te Frage:
Was ist besser (beide im Code aufgeführt, geht auch beides, hätte nur gerne eure Meinung)
element.onclick = function
oder
element.addEventListener

Mein eigentliches Problem:
ich definiere mir ja ein Start Knoten:
this.basisNode = document.getElementById('f1');
kann aber in den Event Functionen nicht auf this.basisNode zugreifen.
Dort aber immer document.getElementById('f1'); zu schreiben fände ich unschön

function CInputCheck(){
        this.basisNode =  document.getElementById('f1'); // mein Start Knoten     
        this.newBox = function(){
          try{
           var Box = document.createElement('div');
           var closeLink = document.createElement('a');
           var closeText = document.createTextNode('Close');
           closeLink.appendChild(closeText);
           closeLink.setAttribute('href', '#');
           //was ist besser; so:
         /*  closeLink.onclick = function(){
               var parent = closeLink.parentNode;
               document.getElementById('f1').removeChild(parent);
           }*/
           // oder so:
          if(closeLink.addEventListener){// echte Browser
              closeLink.addEventListener('click', function(evt) { 
                   var parent = closeLink.parentNode;
                   // unschön, warum geht this.basisNode.removeChild(parent); 
                   //nicht bzw. wie kann ich an diese Stelle auf this.basisNode zugreifen....
                   document.getElementById('f1').removeChild(parent); 
               }, false); 
          }else{ // IE
            if (closeLink.attachEvent) {
                closeLink.attachEvent('onclick', 
                             function(evt){
                                 var parent = closeLink.parentNode;
                                 // unschön....
                                 document.getElementById('f1').removeChild(parent);
                             });
            }
           }
           /*
             diverses
           */
           this.basisNode.appendChild(Box); // Zugriff geht
          }catch(e){alert(e);}
        }  
    } 

Dann hätte ich noch zu dem Thema eine allgemeine Frage:

habe noch keine Möglichkeit gefunden, einer Funktion welche ich über ein Event an ein Element binde auch einen Parameter mitzugeben. Wäre aber schön wenn es da einen Weg geben würde...

[pekka]

Ich hab nicht den totalen Durchblick beim Thema Events und muß mich immer bei einer konkreten Aufgabenstellung Stück für Stück durchhangeln. Eine Empfehlung auf jeden Fall: Die großen Frameworks bringen Event-Funktionen mit, die IE-Workarounds und dergleichen unnötig machen. Würde ich unbedingt empfehlen.
Bei Prototype finden sich die Event-Funktionen hier. Würde micbh nicht wundern, wenn damit auch deine Probleme lösbar sind.

[phpguru42]

Re: addEventListener und zugriff auf klassenvariable

Original geschrieben von mcmurphy
Was ist besser (beide im Code aufgeführt, geht auch beides, hätte nur gerne eure Meinung)
element.onclick = function
oder
element.addEventListener

In deinem Fall würde die erste Variante ausreichen. Der Nachteil daran ist, dass ein bereits vorhandener onklick-Handler überschrieben werden würde.

Bei Variante 2 kannst du mehere Handler für ein Event registrieren. Dazu habe ich hier zwei nette Funktionen gefunden: http://ejohn.org/projects/flexible-javascript-events


Die Lösung für Frage 2 würde mich auch brennend interessieren, da ich gerade wieder dasselbe Problem hatte. Frustriert habe ich es dann über eine globale Variable gelöst

[wahsaga]

Re: Re: addEventListener und zugriff auf klassenvariable

function rufMichMitParameterAuf(Parameter) {
  alert(Parameter);
}

element.onclick = function() { rufMichMitParameterAuf(4711); }

http://aktuell.de.selfhtml.org/artik...tion/#closures

[mcmurphy]

THX @ Wahsaga

aber das funktioniert nur mit element.onclick, gibts es auch bei addEventListener eine Möglichkeit einen Parameter weiterzugeben?

[wahsaga]

Wuesste nicht, warum das da nicht funktionieren sollte - addEventListener nimmt doch auch eine Funktionsreferenz als Parameter.

[mcmurphy]

Wahsaga
bist ein Schatz....

[phpguru42]

Hast Du das Problem bezüglich "document.getElementById('f1'); / this.basisNode" jetzt gelöst?

[mcmurphy]

Hast Du das Problem bezüglich "document.getElementById('f1'); / this.basisNode" jetzt gelöst?

ja, mit dem Tip von Wahsaga