Hannes Lau: Eventhandler dynamisch hinzufügen

Hallo!

Ist es möglich einem DOM-Objekt einen Event-Handler (onChange) hinzuzufügen, der eine Funktion auf dem hinzhufügenden Objekt aufruft?

Konkret:

function List(node) {
  this.node = node;
  this.node.onchange = this.changed;
}

List.prototype.changed = function() {
  alert(this.node);
}

Wenn ich das Event durch eine Änderung im Browser auslöse wird die changed richtig aufgerufen, this scheint aber nicht auf das Objekt zu zeigen, welches den Event-Hanlder eingetragen hat. this.node ist undefiniert. this scheint vielmehr auf das Objekt zu zeigen, welches das Event ausgelöst hat.
Wie benachrichtige ich nun aber das Objekt, welches den EH eingetragen hat von seiner Auslösung?

Hat jemand eine Idee? Ich würde mich sehr freuen!

Einen netten Gruß
Hannes

  1. Hi Hannes,

    Ist es möglich einem DOM-Objekt einen Event-Handler (onChange) hinzuzufügen, der eine Funktion auf dem hinzhufügenden Objekt aufruft?

    Warum soll der onchange-Handler nicht von Anfang an da sein?

    In der von ihm aufgerufenen Funktion kann ein Flag abgefragt werden, ob was gemacht wird oder nicht.

    Dann musst du nicht den Eventhandler erzeugen, sondern nur dieses Flag setzen.

    Gruß,
    Gunnar

    --
    “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
    1. Hi Hannes,

      Ist es möglich einem DOM-Objekt einen Event-Handler (onChange) hinzuzufügen, der eine Funktion auf dem hinzhufügenden Objekt aufruft?

      Warum soll der onchange-Handler nicht von Anfang an da sein?

      Ich hätte es schöner gefunden wenn ich ihn im Konstruktor des anderen Objektes anlegen kann. Man könnte dann die Funktionalität schnell ändern ohne in das HTML eingreifen zu können. Ich habe jetzt im HTML

      <select name=box id=box onChange="myListBox.changed">

      ...

      <script ...>
      myListBox = new ListBox(document.getElementById("box"));
      </script>

      Wenn der EventHandler sich im Konstruktor von ListBox erzeugen ließe bräuchte ich nur den <script> Block hinzuzufügen und könnte trotzdem auf Änderungen reagieren.

  2. Hallo,

    function List(node) {
      this.node = node;
      this.node.onchange = this.changed;
    }

    List.prototype.changed = function() {
      alert(this.node);
    }

    this scheint vielmehr auf das Objekt zu zeigen, welches das Event ausgelöst hat.

    Das ist richtig.

    Wie benachrichtige ich nun aber das Objekt, welches den EH eingetragen hat von seiner Auslösung?

    Nur über einen Umweg: Hänge dem Elementobjekt eine Eigenschaft an, die auf das entsprechende ListBox-Objekt verweist. In der Event-Handler-Funktion kann über diese Eigenschaft auf das ListBox-Objekt zugegriffen werden.

    function List (node) {
      this.node = node;
      node.List = this;
      this.node.onchange = this.changed;
    }
    List.prototype.changed = function () {
      alert(this.List.node);
    };

    Mathias

  3. Nabend Hannes,

    Ist es möglich einem DOM-Objekt einen Event-Handler (onChange) hinzuzufügen, der eine Funktion auf dem hinzhufügenden Objekt aufruft?

    Konkret:

    function List(node) {
      this.node = node;
      this.node.onchange = this.changed;
    }

    List.prototype.changed = function() {
      alert(this.node);
    }

    als kleines Beispiel, wie es im Mozilla funktioniert:

      
      
    function removeAlert()  
     {  
     document.getElementsByTagName('body')[0].removeChild(document.getElementsByTagName('body')[0].lastChild);  
     }  
    text         =document.createTextNode('klick mich');  
    b            =document.createElement('b');  
      
    b.appendChild(text);  
      
    b.onclick    =function(){removeAlert();};  
    b.onmouseover=function(){this.style.color='#f00';};  
    b.onmouseout =function(){this.style.color='#000';};  
      
    document.getElementsByTagName('body')[0].appendChild(b);  
    
    

    Wenn ich das Event durch eine Änderung im Browser auslöse wird die changed richtig aufgerufen, this scheint aber nicht auf das Objekt zu zeigen, welches den Event-Hanlder eingetragen hat. this.node ist undefiniert. this scheint vielmehr auf das Objekt zu zeigen, welches das Event ausgelöst hat.

    Das Beispiel arbeitet auch mit this, aber in einem anderen Kontext. This ist in diesem Falle, wie Du auch schon bemerkt hast, das eventauslösende Elemet.

    Wie benachrichtige ich nun aber das Objekt, welches den EH eingetragen hat von seiner Auslösung?

    Bitte erkläre diesen Satz etwas eingehender und nach möglichkeit ohne Abküzungen! Mir ist leider nicht klar, was Du wissen willst.

    Gruß aus Berlin!
    eddi