PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   addEventListener und zugriff auf klassenvariable (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/95404-addeventlistener-und-zugriff-auf-klassenvariable.html)

mcmurphy 04-02-2009 13:09

addEventListener und zugriff auf klassenvariable
 
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
PHP-Code:

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 04-02-2009 13:30

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 04-02-2009 14:07

Re: addEventListener und zugriff auf klassenvariable
 
Zitat:

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 04-02-2009 14:29

Re: Re: addEventListener und zugriff auf klassenvariable
 
Code:

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

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

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

mcmurphy 04-02-2009 14:41

THX @ Wahsaga

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

wahsaga 04-02-2009 15:48

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

mcmurphy 04-02-2009 16:32

:danke: Wahsaga
bist ein Schatz....

phpguru42 06-02-2009 09:42

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

mcmurphy 09-02-2009 13:37

Zitat:

Hast Du das Problem bezüglich "document.getElementById('f1'); / this.basisNode" jetzt gelöst?
ja, mit dem Tip von Wahsaga


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:00 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG