onclick Event Handler

[frankx]

Ahoi,

»» Insofern ist also in der Funktion "this" das Element, in dem der Click ausgeführt wurde?

Nein. Der Event-Listener ist ja dem tr-Element zugewiesen:

<tr onclick="bla()"><td><a href="#">Link</a></td></tr>

function bla() {

alert(this);
}

>   
> hier würde `this`{:.language-javascript} auf das globale Objekt (window) zeigen  
>   
>   
> Wird `this`{:.language-javascript} hingegen übergeben:  
>   
> <tr onclick="bla(this)"><td><a href="#">Link</a></td></tr>  
>   
> ist in der Funktion  
>   
> ~~~javascript

function bla(ref) {  

>   alert(ref.nodeName);  
> }

in ref immer die Referenz auf das tr-Element übergeben, egal, was innerhalb angeklickt wird.

Also: so geht es nicht. Daher muß in der Funktion bla das geklickte Element mit target bzw. srcElement ermittelt werden:

<tr onclick="bla()"><td><a href="#">Link</a></td></tr>

function bla(e) {

if (!e) e = window.event;
  var ref = e.target || e.srcElement;
  alert(ref.nodeName);
}

  
mmh,  
~~~html
  
<script type="text/javascript">  
window.onload = function() {  
	set_onclicks();  
}  
  
set_onclicks = function () {  
	divs = document.getElementsByTagName("div");  
	for(i=0;i<divs.length;i++) {  
		divs[i].onclick = test_click;  
	}  
}  
  
test_click = function () {  
	alert(this.id);  
}  
</script>  
<div id="div1id">div1id</div>  
<div id="div2id">div2id mit Anker:<a id="anker_id" >Anker mit anker_id</a></div>  
  
<table>  
<tr id="test" onclick="alert(this.id + ' - ' + this.getElementsByTagName('a').length)"><td><p>blub</p></td></tr>  
<tr id="test" onclick="alert(this.id + ' - ' + this.getElementsByTagName('a').length)"><td><a>blub</a></td></tr>  
</table>  

in o.g. Beispielen ist jeweils "this" das aufrufende Element. Sowohl beim div, dem nach onload das onclick zugewiesen wird, wie auch das alert direkt im Quelltext.

--- Syntaxhighlight sieht komisch aus, ist aber getestet bzw. "funzt".

Dank und Gruß,

frankx