| 

.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 21 3
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 14,6k 3 9
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 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!