Torsten: Attribut entfernen/löschen

Hallo,

ich habe ein Element, das anfangs noch ohne Event Handler ist. Wenn man aber am rechten Rand des Elements klickt, soll der erste eventhandler aktiviert werden mit resizeright:

/* Ausschnitt der Funktion */  
d = document.getElementById(this.id);  
if(mousepos.x >= (d.offsetWidth-5) && mousepos.y <= (d.offsetHeight-8))  
	{  
		d.style.cursor = "e-resize";  
		d.onmousedown = resizeright;  
		d.onmouseup = backnormal;  
	}
function resizeright() {  
	document.getElementById(this.id).innerHTML = 'Rechts<br><br><br>Super!';  
}  
  
Damit der Eventhandler wirklich nur am rechten Rand des Elements aktiv ist, möchte ich beim mouse up den Eventhandler wieder löschen:  
  
function backnormal() {  
	document.getElementById(this.id).removeEventListener("onmousedown", resizeright, false);  
	document.getElementById(this.id).innerHTML = 'Normal<br><br><br>Super!';  
}

Problem: Der Eventhandler wird anscheinend nicht gelöscht, denn egal wo ich dann in das Element klicke, wird resizeright dennoch aufgerufen. Was muss ich tun um das zu verhindern?

Danke!

  1. Problem: Der Eventhandler wird anscheinend nicht gelöscht, denn egal wo ich dann in das Element klicke, wird resizeright dennoch aufgerufen. Was muss ich tun um das zu verhindern?

    Du musst dich entscheiden , ob du den Eventhandler über die Property onmousedown zuweist und wieder entfernst, oder über add/removeEventListener.
    Das lässt sich nicht mixen.

  2. Hallo,

    es gibt verschiedene Modelle fürs Event-Handling:

    Zum einen das Traditionelles Event-Handling. Schema:

    element.onevent = handler;

    Beim traditionellen Event-Handling kannst du die Event-Überwachung so beenden:

    element.onevent = null;

    Dann gibt es das W3C-Modell (DOM Events). Schema:

    element.addEventListener('event', handler, false);

    Bei DOM Events kannst du das Event-Handling so beenden:

    element.removeEventListener('event', handler, false);

    Du solltest dich für ein Modell entscheiden, am besten das W3C-Modell (Gründe).

      d.onmousedown = resizeright;  
      d.onmouseup = backnormal;  
    

    function resizeright() {
    document.getElementById(this.id).innerHTML = 'Rechts<br><br><br>Super!';
    }

    function backnormal() {
    document.getElementById(this.id).removeEventListener("onmousedown", resizeright, false);
    document.getElementById(this.id).innerHTML = 'Normal<br><br><br>Super!';
    }

    Auf was soll hier »this« verweisen? Auf ein Objekt von dir oder auf das Elementobjekt?

    In Event-Handlern hast du direkt über »this« Zugriff auf das verarbeitende Element. Ein Holen eben dieses Elements über document.getElementById ist nicht nötig.

    Wenn du willst, dass »this« im Handler auf ein anderes Objekt zeigt, so musst du dich mit Funktions-Binding beschäftigen. Siehe dazu Objektverfügbarkeit und this-Kontext.

    Viele Grüße,
    Mathias