| 

.NET C# Java Javascript Exception

5
Hallo Leute.
Ich bin neu her und dachte, ich stelle gleich mal eine Frage
Ich sitze jetzt schon seit 2-3 Stunden an dem Problem,
und irgendwie komme ich nicht weiter.

Hier mein zu testender Quellcode:
<!DOCTYPE html>
<html>
<head>
<title>W3C</title>
<script type="text/javascript">

function init() {

 var b1 = document.getElementById("b1");
 var b2 = document.getElementById("b2");
 var f1 = document.getElementById("f1");
 var l1 = document.getElementById("l1");

 b1.addEventListener("click", ausgabe, false);
 b2.addEventListener("click", ausgabe, true);

 f1.addEventListener("click", ausgabe, false);
 f1.addEventListener("click", ausgabe, true);

 l1.addEventListener("click", ausgabe, false);

 document.addEventListener("click", ausgabe, false);
}

function ausgabe(x) {
 if (x.currentTarget == document) {
  alert("document");
 } else {
  if (x.currentTarget != null) {
   alert(x.currentTarget.id);
  } else {
   alert(x.target.nodeValue);
  }
 }
}

</script>
</head>
<body onload="init()">

<form id="f1">
 <p>
 <input type="button" id="b1" value="Button 1">
 <input type="button" id="b2" value="Button 2">
 </p>
</form>

<p>
<a href="link.html" id="l1">Text</a>
</p>

</body>
</html>


Meine Frage ist nun, wo liegt genau der Unterschied zwischen
Event-Capturing und Event-Bubbling?

Ich verstehe schon das Grundprinzip von beiden, aber
allerdings nicht die Ausgaben wenn ich Button 1 und Button 2
drücke. Bei true sollte doch direkt das Zielobjekt angesprungen werden
oder sehe ich das Falsch?

Wichtig wäre vielleicht auch noch, wann setzt man solche Verfahren überhaupt ein?
Vielen Dank im voraus :)
10.07.2013
sanmarcoz
sanmarcoz
21 ● 3
Editiert 11.07.2013
Xantiva
Xantiva
2,3k ● 2 ● 9
1
Bitte nutze für Code - Beispiele auch das "Code" - Element zur Formatierung. Dadurch ist der Code viel leichter zu lesen. ;)
– Xantiva 11.07.2013
2 Antworten
3
useCapture legt die Richtung fest in der Events behandelt werden. Also von der Root bis zum tiefsten Listener oder vom tiefsten Listener zur Root.

HTML > BODY > FORM > P > BUTTON

oder

BUTTON > P > FORM > BODY > HTML




Mittels stopPropagation kann jeder Eventlistener in der Kette das Bubble'n (also das auf- oder absteigen des Events) beenden.

Ein recht guten Artikel gibt es zu dem Thema zum Beispiel hier: useCapture – der Weg des Ereignisses
11.07.2013
Floyd
Floyd
14,6k ● 3 ● 9
Editiert 11.07.2013
Floyd
Floyd
14,6k ● 3 ● 9
0
Danke für deine Antwort :)
In dem Beispiel oben welches ich gepostet aber auch in dem Link, welchen du gepostet hast (danke dafür) versuche ich die Beispiele zu verstehen.

Vielleicht zu meinem:
Es bedeutet ja, wenn ich als 3. Parameter false angebe, wird bubbling ausgeführt.
Wenn ich mir die Ausgabe anschaue habe ich den Fall wenn ich den Button b1 drücke:
document, f1, b1, f1

Bubbling bedeutet doch, das er von unten nach oben geht, und nicht von oben nach unten und wieder nach oben oder liegt da mein Verständnisproblem? :) Deswegen verstehe ich auch nicht so ganz die Ausgabe..

Vielen Dank :)
11.07.2013
sanmarcoz
sanmarcoz
21 ● 3
Demo Event Bubbling: http://jsfiddle.net/mmALJ/
Demo Event Capturing: http://jsfiddle.net/KQLT7/1/
– Floyd 12.07.2013

Stelle deine Javascript-Frage jetzt!