Meta tags:
description=Event Bubbling und Capturing sind zwei Phasen des Event-Propagationsmodells, das ausgelöst wird, wenn Ereignisse im Document Object Model (DOM) eintreten.;

Headings (most frequently used words):

event, bubbling, capturing, und, beispiel, javascript, propagation, in, meistern, verstehen, das, richtige, element, ansprechen, steuern, praktische, beispiele, fazit, übungen, ein, hinweis, zu, ereignissen, die, nicht, blubbern, stoppen, kombinieren, delegation,

Text of the page (most frequently used words):
und (72), event (57), das (46), bubbling (29), die (26), sie (25), dom (23), #element (22), capturing (22), ereignis (22), der (22), auf (20), #javascript (19), div (19), api (19), phase (18), ein (17), html (16), the (16), lernen (15), click (15), handler (14), wird (14), alert (14), propagation (13), listener (13), container (13), werden (12), mit (12), ausgeführt (12), target (11), ist (11), document (11), für (9), addeventlistener (9), dem (9), you (9), function (9), wenn (9), color (9), methoden (9), web (8), den (8), des (8), true (8), kopieren (8), clicked (8), ziel (8), outer (8), zum (8), this (7), delegation (7), currenttarget (7), wandert (7), box (7), nicht (7), events (7), tools (6), einführung (6), ereignisse (6), gibt (6), dann (6), stoppropagation (6), abwärts (6), einen (6), von (6), nach (6), beispiel (6), onclick (6), width (6), w3docs (5), über (5), probier (5), übungen (5), browser (5), bei (5), durch (5), verwenden (5), ausgelöst (5), wie (5), getelementbyid (5), oben (5), aus (5), outercontainer (5), selbst (5), inner (5), klicken (5), body (5), style (5), and (5), dass (5), string (5), formatter (5), alle (4), json (4), generator (4), css (4), welcher (4), standardmäßig (4), gerade (4), während (4), oder (4), diese (4), aufwärts (4), item (4), console (4), kann (4), elemente (4), bubbled (4), from (4), als (4), innerelement (4), captured (4), script (4), margin (4), head (4), padding (4), background (4), title (4), meta (4), class (4), eigenschaften (4), shadow (4), fetch (4), async (4), code (3), encoder (3), editor (3), quizze (3), php (3), beispiele (3), praktische (3), steuern (3), page (3), phasen (3), hinzugefügt (3), unabhängig (3), konzepte (3), können (3), capture (3), jedes (3), innerhalb (3), müssen (3), benutzerdefinierte (3), handling (3), log (3), list (3), elternelement (3), kind (3), blubbern (3), reihenfolge (3), zuerst (3), sich (3), weg (3), border (3), name (3), behandelt (3), klick (3), verhindert (3), eines (3), unten (3), zwei (3), erreicht (3), zurück (3), dieser (3), object (3), flag (3), data (3), objekte (3), promise (3), funktionen (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), richtige (2), ansprechen (2), verstehen (2), meistern (2), was (2), prüfen (2), muss (2), explizit (2), wurden (2), übung (2), welche (2), eigenschaft (2), ursprünglich (2), aufgetreten (2), davon (2), übergeben (2), lauschen (2), finden (2), weit (2), ohne (2), stopimmediatepropagation (2), diesem (2), nie (2), wieder (2), binden (2), weitere (2), techniken (2), auslösen (2), menu (2), const (2), einem (2), welches (2), geklickt (2), wurde (2), dies (2), inline (2), blubbert (2), attached (2), during (2), pointer (2), cursor (2), radius (2), example (2), device (2), initial (2), scale (2), content (2), viewport (2), utf (2), charset (2), lang (2), doctype (2), zeigt (2), eine (2), pinke (2), löst (2), without (2), klickereignis (2), pink (2), 100 (2), height (2), 200 (2), stoppen (2), aber (2), direkt (2), load (2), blur (2), focus (2), sind (2), bricht (2), standardverhalten (2), umgekehrt (2), preventdefault (2), stoppt (2), selben (2), kein (2), methode (2), genau (2), where (2), tagname (2), handlers (2), welchem (2), vorfahre (2), one (2), children (2), nur (2), beginnt (2), knoten (2), interagiert (2), haben (2), zur (2), wurzel (2), window (2), grundlagen (2), schaltfläche (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), prototypes (2), interaktive (2), property (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, seit, 2014, next, previous, yes, helpful, keine, immer, angegeben, beide, gleichzeitig, parentnode, source, bewegt, bubblings, capturings, hat, verarbeitet, begrenzen, beherrschen, saubere, effiziente, interaktionen, aufbauen, vor, allem, ihre, gesamte, seite, verstreuen, aktuelle, zukünftige, abgedeckt, einzelnen, elementen, erneut, verwandte, textcontent, return, contains, closest, did, originate, häufigste, anwendung, einzigen, befestigen, anstatt, pro, klicks, herauszufinden, effizient, funktioniert, automatisch, später, hinzugefügte, dadurch, vollständige, propagationspfad, richtigen, sichtbar, erst, schließlich, nächstes, befindet, innere, false, anywhere, ffa8a8, f9f9f9, bottom, ccc, solid, sans, serif, arial, font, family, dieses, sowohl, auch, kombinieren, hellblauem, hintergrund, enthält, irgendwo, meldung, hingegen, anderen, weil, hochblubbert, see, top, lightblue, manchmal, möchten, kindelement, elternelements, auslöst, meisten, einige, darauf, verlassen, übergeordneter, abfängt, bubbelnden, äquivalente, hängen, jederzeit, überprüfen, festzustellen, bestimmtes, teilnimmt, bubbles, mouseout, mouseover, focusout, focusin, mouseleave, mouseenter, hinweis, ereignissen, voneinander, standardaktion, browsers, folgen, links, nächsten, pfad, gelangt, weiteres, noch, effekt, bietet, verschiedene, gezeigt, möglich, macht, erkennen, lives, happened, imagine, nested, logtargets, dessen, ändert, baum, entspricht, regulären, funktions, tiefste, angeklickte, bleibt, gesamten, gleich, entstand, regel, wissen, begann, angehängt, geben, darüber, auskunft, alerts, handlern, wäre, setzen, dritte, argument, erste, viel, seltener, verwendet, praktisch, abfangen, bevor, innerer, verarbeiten, sehen, außerhalb, klickpunkts, beim, spezifischsten, tiefsten, fließt, jeden, vorfahren, richtung, fast, attributen, aktiviert, here, down, vom, tatsächlich, zielphase, spitze, baums, zielelement, findet, drei, statt, leitfaden, erklärt, propagationsmodell, man, jeder, zuhört, praktischen, werkzeuge, alltag, nützlich, machen, baut, übergeordnete, wanderung, bezeichnet, verläuft, richtungen, verständnis, beider, entscheidend, zuverlässige, ereignisbehandlung, echten, anwendungen, insbesondere, verschachtelte, eigene, besitzen, propagationsmodells, model, eintreten, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, beforeunload, unload, resource, loading, submit, clipboard, change, input, cut, copy, paste, fokussierung, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, standard, browseraktionen, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, try, catch, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse, tutorial,

Text of the page (random words):
math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript event bubbling und capturing event bubbling und capturing sind zwei phasen des event propagationsmodells das ausgelöst wird wenn ereignisse im document object model dom eintreten event bubbling und capturing in javascript meistern wenn sie auf eine schaltfläche klicken wird das klickereignis nicht nur auf dieser schaltfläche ausgelöst es wandert durch jedes übergeordnete element auf dem weg zum ziel und zurück diese wanderung wird als event propagation bezeichnet und verläuft in zwei richtungen capturing abwärts zum ziel und bubbling zurück nach oben zur wurzel das verständnis beider konzepte ist entscheidend für die zuverlässige ereignisbehandlung in echten anwendungen insbesondere wenn verschachtelte elemente eigene handler besitzen dieser leitfaden erklärt das propagationsmodell zeigt wie man in jeder phase zuhört und behandelt die praktischen werkzeuge event target event currenttarget stoppropagation und event delegation die diese konzepte im alltag nützlich machen er baut auf den grundlagen auf die in einführung in browser events und javascript events behandelt werden event propagation verstehen event propagation im dom findet in genau drei phasen statt in dieser reihenfolge capturing phase das ereignis beginnt an der spitze des baums window document html und wandert abwärts zum zielelement zielphase das ereignis erreicht das element mit dem sie tatsächlich interagiert haben bubbling phase das ereignis wandert aufwärts vom ziel zur wurzel zurück capturing down bubbling up html div p target you clicked here kopieren standardmäßig werden handler die mit addeventlistener und inline on attributen hinzugefügt werden in der bubbling phase ausgeführt die capturing phase muss explizit aktiviert werden event bubbling in der bubbling phase beginnt ein ereignis beim spezifischsten element dem tiefsten knoten mit dem sie interagiert haben und fließt dann aufwärts durch jeden vorfahren in richtung document dies ist das standardverhalten für fast jedes ereignis div onclick alert you clicked the div click me or one of my children p onclick alert you clicked the p click me p div kopieren probier es selbst wenn sie auf das p klicken sehen sie zuerst den alert für p dann den alert für div da das ereignis nach oben blubbert wenn sie direkt auf das div klicken außerhalb des p wird nur der div alert ausgelöst das ereignis erreicht p nie da p kein vorfahre des klickpunkts ist event capturing capturing ist die erste phase in der das ereignis abwärts zum ziel wandert sie wird viel seltener verwendet als bubbling ist aber praktisch wenn sie ein ereignis abfangen müssen bevor ein innerer handler es verarbeiten kann um während der capturing phase zu lauschen setzen sie das dritte argument von addeventlistener auf true oder übergeben sie capture true div id outer click me or one of my children p id inner click me p div script document getelementbyid outer addeventlistener click function alert captured on div true true capturing phase document getelementbyid inner addeventlistener click function alert captured on p true script kopieren probier es selbst klicken sie auf das p und die alerts werden von oben nach unten ausgelöst zuerst div ein vorfahre der auf dem weg nach unten erreicht wird dann p das ziel bei bubbling handlern wäre die reihenfolge umgekehrt das richtige element ansprechen innerhalb eines handlers müssen sie in der regel wissen bei welchem element das ereignis begann und an welchem element der handler angehängt ist zwei eigenschaften geben darüber auskunft event target das element bei dem das ereignis entstand das tiefste angeklickte element es bleibt während der gesamten propagation gleich event currenttarget das element dessen listener gerade ausgeführt wird es ändert sich wenn das ereignis durch den baum wandert und entspricht this innerhalb eines regulären funktions handlers function logtargets event console log target event target tagname console log currenttarget event currenttarget tagname imagine this handler is on a div and you click a nested p target p where the click happened currenttarget div where the listener lives kopieren event target ist das was event delegation wie unten gezeigt möglich macht ein handler auf einem elternelement kann genau erkennen auf welches kind geklickt wurde propagation steuern javascript bietet verschiedene methoden um zu steuern wie weit ein ereignis wandert methode effekt event stoppropagation verhindert dass das ereignis zum nächsten element im pfad gelangt kein weiteres bubbling capturing handler am selben element werden noch ausgeführt event stopimmediatepropagation stoppt die propagation und verhindert dass weitere handler am selben element ausgeführt werden event preventdefault bricht die standardaktion des browsers ab z b das folgen eines links stoppt die propagation nicht stoppropagation und preventdefault sind unabhängig voneinander das stoppen der propagation bricht das standardverhalten nicht ab und umgekehrt ein hinweis zu ereignissen die nicht blubbern die meisten ereignisse blubbern aber einige nicht zum beispiel focus blur mouseenter mouseleave und load für diese können sie sich nicht darauf verlassen dass ein übergeordneter handler sie über bubbling abfängt verwenden sie die bubbelnden äquivalente focusin focusout mouseover mouseout oder hängen sie den listener direkt an sie können jederzeit event bubbles überprüfen um festzustellen ob ein bestimmtes ereignis an der bubbling phase teilnimmt praktische beispiele beispiel 1 event bubbling stoppen manchmal möchten sie dass ein klick auf ein kindelement den handler des elternelements nicht auslöst doctype html html lang en head meta charset utf 8 meta name viewport content width device width initial scale 1 0 title event propagation example title style container width 200 px height 200 px background color lightblue padding 20 px box width 100 px height 100 px background color pink margin top 20 px cursor pointer style head body div class container onclick alert you clicked the container click the pink box to see event propagation div class box onclick event stoppropagation alert you clicked the box without bubbling div div body html kopieren probier es selbst in diesem beispiel gibt es einen container mit hellblauem hintergrund der eine pinke box enthält ein klick irgendwo im container löst einen alert mit der meldung you clicked the container aus ein klick auf die pinke box hingegen löst einen anderen alert mit you clicked the box without bubbling aus weil event stoppropagation verhindert dass das klickereignis zum container hochblubbert beispiel 2 bubbling und capturing kombinieren dieses beispiel zeigt wie ein ereignis sowohl in der capturing als auch in der bubbling phase behandelt werden kann doctype html html lang en head meta charset utf 8 meta name viewport content width device width initial scale 1 0 title event capture and bubbling example title style body font family arial sans serif margin 0 padding 20 px outercontainer border 2 px solid ccc padding 20 px margin bottom 20 px background color f9f9f9 border radius 10 px innerelement background color ffa8a8 padding 10 px border radius 5 px cursor pointer style head body div id outercontainer onclick alert event bubbled from outer container p style margin 0 click anywhere in this outer container p p id innerelement click me p div script event listener attached to the outer container during the capturing phase document getelementbyid outercontainer addeventlistener click function alert event captured by outer container true event listener attached to the inner element during the bubbling phase document getelementbyid innerelement addeventlistener click function alert event bubbled from inner element false script body html kopieren probier es selbst wenn sie auf das innere element klicken der capturing listener auf outercontainer wird zuerst ausgeführt und gibt event captured by outer container aus er befindet sich auf dem weg abwärts zum ziel der bubbling listener auf innerelement wird als nächstes ausgeführt und gibt event bubbled from inner element aus das ziel selbst schließlich wird der inline onclick auf outercontainer ausgeführt wenn das ereignis nach oben blubbert und gibt event bubbled from outer container aus dadurch wird der vollständige propagationspfad in der richtigen reihenfolge sichtbar erst abwärts über capturing dann das ziel dann wieder aufwärts über bubbling beispiel 3 event delegation die häufigste praktische anwendung von bubbling ist die event delegation einen einzigen listener an einem elternelement zu befestigen anstatt einen listener pro kind da klicks nach oben blubbern kann das elternelement event target verwenden um herauszufinden auf welches kind geklickt wurde dies ist effizient und funktioniert automatisch für später hinzugefügte elemente const list document getelementbyid menu list addeventlistener click function event did the click originate on an li const item event target closest li if item list contains item return console log you clicked item textcontent kopieren mit diesem einen handler wird jedes aktuelle und zukünftige li innerhalb von menu abgedeckt sie müssen nie wieder listener an einzelnen elementen binden oder erneut binden weitere verwandte techniken finden sie in event handling im dom und benutzerdefinierte ereignisse auslösen fazit event propagation bewegt ein ereignis abwärts capturing und dann aufwärts bubbling durch den dom standardmäßig werden handler während des bubblings ausgeführt übergeben sie true oder capture true um während des capturings zu lauschen verwenden sie event target um das element zu finden das das ereignis ausgelöst hat event currenttarget für das element das es gerade verarbeitet und stoppropagation stopimmediatepropagation um zu begrenzen wie weit es wandert beherrschen sie diese konzepte und sie können saubere effiziente interaktionen aufbauen vor allem durch event delegation ohne listener über ihre gesamte seite zu verstreuen übungen übung welche eigenschaft gibt das element an bei dem ein ereignis ursprünglich aufgetreten ist unabhängig davon welcher handler gerade ausgeführt wird welche eigenschaft gibt das element an bei dem ein ereignis ursprünglich aufgetreten ist unabhängig davon welcher handler gerade ausgeführt wird event currenttarget event target event source this parentnode prüfen übung in welcher phase werden listener die mit addeventlistener hinzugefügt wurden standardmäßig ausgeführt in welcher phase werden listener die mit addeventlistener hinzugefügt wurden standardmäßig ausgeführt die capturing phase die bubbling phase beide phasen gleichzeitig keine die phase muss immer explizit angegeben werden prüfen was this page helpful yes no previous javascript einführung in browser ereignisse next event delegation on this page event bubbling und capturing in javascript meistern eve...