✔ Event für Element registieren

N

Netzwerkidi

Hallo in die Runde,

ich habe zum Testen zwei Images angelegt. Eines hat bereits einen onclick-Event, das zweite bekommt diesen onclick-Event nach dem Aufruf.
Ein drittes Image wird mit onclick-Event ebenfalls beim Aufruf angelegt.

Vielleicht kann mir einer sagen, ob und wie man einfacher, als ich es gemacht habe, einen onclick-Event nachträglich registrieren kann. Ich will nur ein "alert(this.id)" absetzen.
Um den Alert zu erhalten, bin ich beim img2 über die Auswertung der Event-Arguments gegangen, weil "alert(this.id)" so nicht funktioniert wie bei img1.

Beim img3 einen oncliclk-Event direkt bei Definition der Image-Properties klappt nicht, so wie z. b. src, width oder id. Eine Fehlermeldung kommt aber auch nicht.

Wenn es nicht so einfach zu erklären ist, würde mir auch ein Link weiterhelfen. Ich habe leider nichts gefunden.

Beste Grüße
Idi


Gelesen: http://www.howtocreate.co.uk/tutorials/javascript/domevents

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>

  </head>
  <body>
  <div id="d1"><h2>Images clicken!</h2>
    <img id="img1" src="http://style.tutorials.de/v10/headerlogo.png" onclick="alert(this.id);" height="100" width="150"><br>
    <img id="img2" src="http://style.tutorials.de/v10/headerlogo.png"                           height="100" width="150"><br>
  </div>

  <script>
  
  
  function showMessage2(e) {
    //this.id; // Oder anders, einfacher?
    alert(e['srcElement']['id']);
  }
  var _img2 = document.getElementById('img2');
  
  if( _img2.addEventListener ) {
    _img2.addEventListener('click',showMessage2,false);
  } else if( _img2.attachEvent ) {
    _img2.attachEvent('onclick',showMessage2);
  }
  
  // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //
  
  var images = [];
      images[0] = document.createElement("img");
			images[0].src = "http://style.tutorials.de/v10/headerlogo.png";
			images[0].id = 'img3';
			
		  //images[0].onclick = showMessage3; // Funktioniert nicht!!
			      
			images[0].height=100;       		
			images[0].width=150;
              
			document.getElementById('d1').appendChild(images[0]);		
					
	function showMessage3(e) {
    //this.id; // Oder anders, einfacher?	
    alert(e['srcElement']['id']);   
  }
    				
	var _img3 = document.getElementsByTagName('img')[2];
  if ( _img3.addEventListener ) {
    _img3.addEventListener('click', showMessage3, false);
  } else if ( _img3.attachEvent ) {
    _img3.attachEvent('onclick', showMessage3);
  }					
   
  </script>            

  </body>
</html>
 
Hi,

ich weiss nicht genau, was du vereinfachen möchtest.

Du könntest jedoch das Registrieren des Events in eine Funktion packen. Dieser übergibst du die erforderlichen Parameter.
Weiterhin musst du beim Event-Objekt unterscheiden - IE und sonst. Soll heissen, was beim IE srcElement heisst, nennt sich sonst target.

Beispiel:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>

</head>
<body>
  <div id="d1"><h2>Images clicken!</h2>
    <img id="img1" src="http://style.tutorials.de/v10/headerlogo.png" onclick="alert(this.id);" height="100" width="150"><br>
    <img id="img2" src="http://style.tutorials.de/v10/headerlogo.png"                           height="100" width="150"><br>
  </div>

  <script type="text/javascript">
    function showMessage(e){
      alert((window.event)? window.event.srcElement.id : e.target.id);
    }

    function addEvent(objThis, strEvent, fnHandler){
      if(objThis.addEventListener){
        objThis.addEventListener(strEvent, fnHandler, false);
      }else if(objThis.attachEvent){
        objThis.attachEvent('on'+strEvent, fnHandler);
      }
    }

    var _img2 = document.getElementById('img2');
    addEvent(_img2, 'click', showMessage);

  // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //
  var images = [];
      images[0] = document.createElement("img");
      images[0].src = "http://style.tutorials.de/v10/headerlogo.png";
      images[0].id = 'img3';
      images[0].height=100;
      images[0].width=150;

      document.getElementById('d1').appendChild(images[0]);

    var _img3 = document.getElementsByTagName('img')[2];
    addEvent(_img3, 'click', showMessage);

  </script>

  </body>
</html>
Ciao
Quaese
 
Hi Quaese,

irgendwie hatte ich wohl gehofft, das alles sei vielleicht doch zu umständlich und ich könne doch irgendwie direkt mit der "Alert(this.id)"-Variante arbeiten wie im ersten Fall.
Letztlich geht es eigentlich nur um die Registrierung eines Events und nicht um dessen Ausführung zu irgendeinem späteren Zeitpunkt.
Ich hatte gehofft, dass Events, wenn sie einmal da sind, vom Ablauf her gleich sind, was aber offenbar nicht der Fall ist, denn sonst könnte man ja mit "this" arbeiten im 2. und 3. Beispiel.
Ich sehe den Unterschied nicht zwischen der ersten Variante, wo es heißt: wenn es clickt, führe den Alert aus, und den beiden anderen Varianten, die eigentlich nichts anderes tun sollen.
Ok, eigentlich sehe ich ihn schon, im ersten fall wird direkt ausgeführt und bei 2. und 3. delegiert. Deshalb ist eben ein Schritt mehr notwendig.
Aber ok, ich kann, wenn ich will, srcElement/Target ja immer noch einer Varible zuweisen, die ich "this" nenne, und dann bin ich doch wieder da.
Die Ausgabe des Alerts ist natürlich nur ein Platzhalter für etwas anderes. Mir ging mal erst nur darum zu klären, ob der Weg der richtige ist, oder ob es einen anderen gibt.
Hast mir jedenfalls wieder weitergeholfen!

Grüße
Idi
 
Zuletzt bearbeitet von einem Moderator:
Hi,

bei Events des Level 2 werden die Handler in dem Gültigkeitsbereich ausgeführt, in dem sie definiert sind. D.h. um auf this zugreifen zu können, muss der Aufruf im Kontext des auslösenden Elements erfolgen. Das kannst du zum Beispiel über eine Methode bindAsEventListener realisieren, die den Function-Prototy erweitert.

Beispiel:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>

</head>
<body>
  <div id="d1"><h2>Images clicken!</h2>
    <img id="img1" src="http://style.tutorials.de/v10/headerlogo.png" onclick="alert(this.id);" height="100" width="150"><br>
    <img id="img2" src="http://style.tutorials.de/v10/headerlogo.png"                           height="100" width="150"><br>
  </div>

  <script type="text/javascript">
/*
 * Das Function-Objekt wird erweitert
 * Die Funktion nimmt einen Parameter (Objekt) entgegen, in dessen Kontext die Funktion als Methode
 * ausgeführt werden soll.
 */
Function.prototype.bindAsEventListener = function(_this){
  // Aktuelle Funktion in Variable speichern
  var _method = this;

  // Anonyme Funktion closuren und zurückgeben
  return (function(evt){
    // Funktion als Methode des übergebenen Objekts (_this) aufrufen und das passende Event-Objekt weiterreichen
    _method.call(_this, evt || window.event);
  });
};

function showMessage(e){
  alert(this.id);
}

function addEvent(objThis, strEvent, fnHandler){
  if(objThis.addEventListener){
    objThis.addEventListener(strEvent, fnHandler, false);
  }else if(objThis.attachEvent){
    objThis.attachEvent('on'+strEvent, fnHandler.bindAsEventListener(objThis));
  }
}

  var _img2 = document.getElementById('img2');
  addEvent(_img2, 'click', showMessage);

  // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //
  var images = [];
      images[0] = document.createElement("img");
      images[0].src = "http://style.tutorials.de/v10/headerlogo.png";
      images[0].id = 'img3';
      images[0].height=100;
      images[0].width=150;

      document.getElementById('d1').appendChild(images[0]);

  var _img3 = document.getElementsByTagName('img')[2];
  addEvent(_img3, 'click', showMessage);

  </script>

  </body>
</html>
Ciao
Quaese
 
Hi Quaese,
so, ich habe da jetzt mal eine Nacht drüber geschlafen, und ich würde sagen, genau das ist es, was ich gesucht habe, da ich am Ende dieselbe Funktiion - hier: showMessage() - verwenden kann, und ich nur "im Mittelteil", der ja spätestens seit "Ein Fisch namens Wanda" öfter mal für Unklarheiten sorgt, etwas ein wenig anders machen muss.
Hast mir wirklich sehr geholfen, auch was das Technologieverständnis angeht.
Grüße
Idi
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück