tag:forum.selfhtml.org,2005:/self Dynamisches <a> element erstellen mit # innerhalb der href Anweisung – SELFHTML-Forum 2015-08-27T21:08:37Z https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648582?srt=yes#m1648582 bits bayer.timo@web.de 2015-08-24T21:59:31Z 2015-08-24T21:59:31Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Hallo</p> <p>Ich habe ein Problem bei der dynamischen Erstellung von accordions. Ich habe mir folgende Funktion erstellt, welche dem div "accordion-section" ein weiteres accordion element hinzufügen soll. Das funktioniert auch soweit. Jedoch will die verlinkung mit dem accordion content einfach nicht funktionieren. Statisch ist es kein Problem (Siehe code weiter unten). Durch lange tests vermute ich das die href anweisung ein problem macht. Das Problem tacht nur beim setzen des href attributs mittels javascript auf. Kann es sein das Javascript mit der Raute innerhalb der href Anweisung nicht zurecht kommt. Ich habe es auch schon mit %23 anstatt die # versucht. Dies führt jedoch auch nicht zum gewünschten ergebnis.</p> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">dynamicAccordion</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"accordion-section-title"</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">"#accordion-20"</span><span class="token punctuation">;</span> a<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Inhalt 1"</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"accordionSection"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> div<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"accordion-section-content"</span><span class="token punctuation">;</span> div<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">"accordion-20"</span><span class="token punctuation">;</span> <span class="token keyword">var</span> p <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> p<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"Content"</span><span class="token punctuation">;</span> div<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"accordionSection"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>div<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accordion-section-title<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#accordion-20<span class="token punctuation">"</span></span> <span class="token attr-name">Inhalt</span> <span class="token attr-name">1</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accordion-20<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>accordion-section-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>Der JavaScript code für die Accordions sieht wie folgt aus. Dieser funktioniert jedoch sehr gut solange ich alle Elemente statisch erzeuge.</p> <pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion-section-title'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Grab current anchor value</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion input[type="checkbox"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> currentAttrValue <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token string">'.active'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">close_accordion_section</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">close_accordion_section</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Add active class to section title</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Open up the hidden content panel</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion '</span> <span class="token operator">+</span> currentAttrValue<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slideDown</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'open'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648583?srt=yes#m1648583 ralphi ralphi4211@gmail.com 2015-08-24T23:45:11Z 2015-08-24T23:45:11Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Hi, meinst du mit dynamisch, nachträglich generierte Elemente? Wenn ja, ist das mit JQuery nicht so einfach die anzusprechen. Google mal den Nachfolger von ‘live-Funktion’</p> <div class="signature">-- <br> Viele Grüße aus LA ralphi </div> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648584?srt=yes#m1648584 dedlfix 2015-08-25T05:30:24Z 2015-08-25T05:30:24Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Tach!</p> <blockquote> <p>Kann es sein das Javascript mit der Raute innerhalb der href Anweisung nicht zurecht kommt.</p> </blockquote> <p>Javascript hat damit kein Problem.</p> <blockquote> <p>Der JavaScript code für die Accordions sieht wie folgt aus. Dieser funktioniert jedoch sehr gut solange ich alle Elemente statisch erzeuge.</p> </blockquote> <p>Es gibt keinen Unterschied zwischen "dynamisch" und "statisch" erzeugten Elementen. Element ist Element. Es kann jedoch sein - sagt meine Glaskugel - dass du den Code aufrufst, und die Eventhandler an die Elemente zu binden versuchst, bevor du die Elemente erzeugst. Das kann dann so nicht klappen.</p> <p>Entweder du setzt die Eventhandler nach dem Erzeugen der Elemente oder du bindest die Eventhandler an ein die ganze Zeit vorhandenes Vorfahren-Element und fängst dann die hochgebubbelten Events auf.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648587?srt=yes#m1648587 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2015-08-25T06:58:41Z 2015-08-25T06:58:41Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>@@bits</p> <blockquote> <p>Jedoch will die verlinkung mit dem accordion content einfach nicht funktionieren.</p> </blockquote> <p>„Funktioniert nicht“ als Problembeschreibung funktioniert nicht.</p> <p>Was erwartest du? Was passiert stattdessen? Was sagt die Fehlerkonsole? Link zur fraglichen Seite?</p> <p>LLAP </p> <div class="signature">-- <br> Ist diese Antwort <em>anstößig</em>? Dann könnte sie <a href="http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860" rel="noopener noreferrer"><em>nützlich</em></a> sein. </div> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648591?srt=yes#m1648591 bits bayer.timo@web.de 2015-08-25T07:50:32Z 2015-08-25T07:50:32Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Ja genau das meine ich. Ich will nach einer bestimmten aktion z.B. in button klick, ein neues accordion unterelement erzeugen. Kann JQuery keine ich sag mal "zur laufzeit" erstellten elemente ansprechen?</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648589?srt=yes#m1648589 bits bayer.timo@web.de 2015-08-25T07:45:20Z 2015-08-25T07:45:20Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Danke für die Antwort. Der Code für die Accordionevents sieht wie folgt aus. Dieser steht in einer eigenen Datei und wird über den script tag in die html datei eingebunden. Innerhalb der js Datei verwendet ich ja nur classNames wie accordion_section-title und accordion-section-content. Es werden also eigentliche keine Objekte direkt angesprochen.</p> <pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">function</span> <span class="token function">close_accordion_section</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion .accordion-section-title'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion .accordion-section-content'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slideUp</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'open'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion-section-title'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Grab current anchor value</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion input[type="checkbox"]'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> currentAttrValue <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">'href'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token string">'.active'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">close_accordion_section</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">close_accordion_section</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Add active class to section title</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Open up the hidden content panel</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.accordion '</span> <span class="token operator">+</span> currentAttrValue<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slideDown</span><span class="token punctuation">(</span><span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'open'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648590?srt=yes#m1648590 bits bayer.timo@web.de 2015-08-25T07:48:59Z 2015-08-25T07:48:59Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Ich erwarte ein übliches accordion verhalten. Also wenn man auf den accordion header klickt, geht ein content bereich nach unten auf und bei erneutem klicken wieder zu. Accordion eben ;-) Bei mir wird der header zwar angezeigt, wenn ich darauf klicke passiert nichts. Der accordion content wird nicht aufgeklapppt bzw angezeigt. Einen link zur Seite kann ich momentan nicht liefern. Die seite wird aktuell nur lokal betrieben</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648596?srt=yes#m1648596 Uli F 2015-08-25T08:26:32Z 2015-08-25T08:26:32Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Auf diese Weise wird der Click-Eventhandler nur einmal zum Document-Ready-Zeitpunkt den Elementen, die bis dahin existieren, zugewiesen. Wenn Du dann nachträglich dynamisch weitere Elemente hinzufügst, mußt Du denen den Event-Handler auch nochmal zuweisen.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648597?srt=yes#m1648597 dedlfix 2015-08-25T08:28:58Z 2015-08-25T08:28:58Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Tach!</p> <blockquote> <p>$(document).ready(function() {</p> </blockquote> <p>Damit wird der Code genau einmal zum Zeitpunkt von DOM-ready ausgeführt. Alles was da noch nicht da ist, bekommt keinen Eventhandler - das passiert auch nicht automagisch in der Zukunft. Wie ich schon vermutete, musst du den Eventhandler nach dem Erzeugen der Elemente hinzufügen (oder das mit dem gebubbelten Event).</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648599?srt=yes#m1648599 dedlfix 2015-08-25T08:31:40Z 2015-08-25T08:31:40Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Tach!</p> <blockquote> <p>Ich erwarte ein übliches accordion verhalten.</p> </blockquote> <p>Das ist das was der Anwender erwartet. Du bist aber der Programmierer, und als solcher musst du weiter ins Details gehen und beschreiben, was du auf Code-Ebene erwartest. Und was du bereits mit den eingebauten Debugging-Werkzeugen oder auch anderswie ermittelt hast.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648687?srt=yes#m1648687 ralphi ralphi4211@gmail.com 2015-08-27T00:19:33Z 2015-08-27T00:19:33Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Hi ,</p> <blockquote> <p>Ja genau das meine ich. Ich will nach einer bestimmten aktion z.B. in button klick, ein neues accordion unterelement erzeugen. Kann JQuery keine ich sag mal "zur laufzeit" erstellten elemente ansprechen?</p> </blockquote> <p>Also mit der Nachfolgerfunktion kam ich nicht zurecht - komm mit JQ1.4 bei meinem Modul aus. zB.: Für meinen Warenkorb</p> <pre><code class="block language-js"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#Tab_korb :input"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">live</span><span class="token punctuation">(</span><span class="token string">'change click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// live bindet zugefügte elemente nur bis JQuery 1.4.1</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <div class="signature">-- <br> Viele Grüße aus LA ralphi </div> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648688?srt=yes#m1648688 dedlfix 2015-08-27T06:04:13Z 2015-08-27T06:04:13Z Dynamisches <a> element erstellen mit # innerhalb der href Anweisung <p>Tach!</p> <blockquote> <p>Kann JQuery keine ich sag mal "zur laufzeit" erstellten elemente ansprechen?</p> </blockquote> <p>Doch, es kann, in einem gewissen Sinne. Es kann nur nicht zaubern, sondern muss sich an die zugrundeliegenden Möglichkeiten und Gegebenheiten halten. Es kann jedenfalls keine Eventhandler bis in alle Zukunft an neu erstellte Elemente binden. Direkt binden geht nur an vorhandene Elemente. Der stattdessen verwendbare Mechanismus nennt sich Event Bubbling. Ereignisse (mit Ausnahmen) blubbern die Vorfahrenkette nach oben. Du musst dich für dein Problem an einen die ganze Zeit existierenden Vorfahren hängen und dort auf das Ereignis warten. Wenn es auftritt, wird dein dort hängender Eventhandler mit einem Parameter aufgerufen. In dem findest du das eigentliche Ziel des Events, welches also der nachträglich eingefügte Button oder was auch immer ist. Wie das genau geht, ist garantiert schon irgendwo im Netz beschrieben. Suche nach: jQuery Event Bubbling.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648707?srt=yes#m1648707 Orlok 2015-08-27T11:01:15Z 2015-08-27T11:01:15Z Event Handling und Event Delegation <p>Hallo</p> <blockquote> <blockquote> <p>Kann JQuery keine ich sag mal "zur laufzeit" erstellten elemente ansprechen?</p> </blockquote> <p>Doch, es kann, in einem gewissen Sinne. Es kann nur nicht zaubern, sondern muss sich an die zugrundeliegenden Möglichkeiten und Gegebenheiten halten. […]</p> </blockquote> <p>This.</p> <p>Wann wurde hier eigenlich zuletzt darüber diskutiert, wie sinnvoll es ist <strong>jQuery</strong> zu verwenden, wenn man <strong>JavaScript</strong> nicht beherrscht? ;-)</p> <p>Ich meine mich dunkel daran erinnern zu können, hierzu mal einen schönen Vergleich gelesen zu haben, frei nach <strong>Camping_RIDER</strong>:</p> <p>„jQuery verwenden ohne JavaScript zu können ist wie einen Rennwagen zu fahren ohne einen Führerschein zu haben.“</p> <p>Jedenfalls ist die Geschichte mit den <strong>Events</strong> eigentlich nicht wirklich schwer zu verstehen, wenn man sich die Mühe macht, sich wenigstens <em>etwas</em> in die Materie einzulesen…</p> <p><strong>Event Handling</strong></p> <p>Fangen wir mal damit an, was HTML-Elemente eigentlich sind, nämlich in erster Linie <em>Objekte</em> in der internen Repräsentation des <strong>Document Object Models</strong>, welche der Browser auf Grundlage des HTML-Dokumentes und der eingebundenen Skripte erstellt.</p> <p>Diese Objekte, welche also die Elemente repräsentieren, verfügen nun über eine Schnittstelle <em>Event Target</em>, die es unter anderem erlaubt, <em>Event Listener</em> hinzuzufügen und wieder zu löschen:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'event'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> capture<span class="token punctuation">)</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'event'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> capture<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das heißt, jedes <strong>Element</strong> hat eine <strong>assoziierte Liste</strong> der für <em>dieses</em> Element registrierten Event Listener.</p> <p>Wobei zu beachten ist, dass <em>keine identischen</em> Event Listener für <em>ein</em> Element existieren dürfen, sprich, wenn man für das gleiche Element <em>mehr</em> als einen Event Listener mit den <em>selben</em> Argumenten registriert, dann wird der bestehende Listeneintrag durch die nachfolgenden überschrieben. Aber das nur nebenbei.</p> <p>Jedenfalls dürfte dadurch klar werden, dass man <em>keine</em> Event Handler für <strong>DOM-Objekte</strong> registrieren kann, die zum Zeitpunkt dieser Operation noch gar nicht existieren…</p> <p>Aber weiter im Text: Was sind eigentlich Events?</p> <p><strong>Events</strong> sind ebenfalls <em>Objekte</em>, also Container für Eigenschaften und Methoden, auf die über die Schnittstelle <em>Event</em> zugegriffen werden kann.</p> <p>Dies ist möglich, da das Event einem assoziierten Event Handler als <strong>Parameter</strong> übergeben wird:</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> <span class="token function-variable function">callback</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> event <span class="token operator">=</span> e<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> callback<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder</span> element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> event <span class="token operator">=</span> e<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Zu den <em>Eigenschaften</em> gehört hier nun in erster Linie der <strong>Typ</strong> des Events, welcher den Event Listenern als steuernder Eingabeparameter übergeben wird, und der wiefolgt ausgelesen werden kann:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> eventType <span class="token operator">=</span> e<span class="token punctuation">.</span>type<span class="token punctuation">;</span> <span class="token comment">// 'click'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Weiterhin gehört zu den Attributen eines Events das <strong>Zielobjekt</strong>, also das <em>DOM-Objekt</em>, an welches das Event verschickt wird:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> targetElement <span class="token operator">=</span> e<span class="token punctuation">.</span>target<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Darüber hinaus gibt es auch noch eine Eigenschaft, in welcher das <strong>DOM-Objekt</strong>, also in der Regel das Element hinterlegt ist, <em>dessen</em> Event Listener tatsächlich aufgerufen wurde, und welches sich von dem eigentlichen <em>Zielobjekt</em>, wie wir gleich noch sehen werden, unterscheiden kann:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> thisElement <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Hierbei sei noch angemerkt, dass der Wert von <code>e.currentTarget</code> beim Aufruf der Callback-Funktion als deren <strong>this</strong>-Wert fungiert, das Element, für welches der Event Listener registriert wurde, also über <em>this</em> referenziert werden kann:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> thisElement <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span> <span class="token comment">// this = e.currentTarget</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Abgesehen von den bereits genannten Event-Attributen, gibt es natürlich noch einige Eigenschaften und Methoden mehr, deren Verständnis allerdings voraussetzt, dass man verstanden hat, <em>wie</em> die Event-Objekte überhaupt <em>zu</em> ihren Zielobjekten gelangen…</p> <p>Es ist nämlich keinesfalls so, dass die Events nur an dasjenige DOM-Objekt übergeben werden, welches als <code>event.target</code> hinterlegt ist, sondern im Gegenteil ist es so, dass die Events über das <em>globale Objekt</em> in die Struktur des DOM eingespeist werden, das heißt in dem Fall, dass es sich bei dem <em>User Agent</em> um einen Browser handelt, ist <strong>Window</strong> die <em>erste Station</em> des Events.</p> <p>Wenn ein Event versandt wird, dann wird intern ein sogenannter <strong>Eventpfad</strong> festgelegt, der, ausgehend vom Zielelement, also dem <em>Event Target</em>, bis hoch zum globalen Window-Objekt <em>alle</em> Vorfahrenelemente von <code>target</code> umfasst.</p> <p>Beispiel:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span> Hallo Welt <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>… und …</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> heading <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'h1'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span> heading<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p><strong>Hier</strong> ist nun ein Event Listener für das H1-Element registriert, und wenn jetzt auf dieses Element geklickt wird, dann sieht der <strong>Eventpfad</strong> des 'click'-Events zunächst so aus:</p> <p>| window | document | body | header | h1 |</p> <p>Das Event-Objekt wird also von jeder Station an die jeweils nächste entlang des Pfades weitergereicht.</p> <p>Dabei ist im Übrigen zu beachten, dass der <em>Event Path</em> bereits zum Zeitpunkt des Versands (<em>event dispatch</em>) <strong>festgelegt</strong> wird, das heißt, Änderungen im DOM, die <em>nach</em> dem Feuern des Events vorgenommen werden, haben auf den Weg des Events keinen Einfluss.</p> <p>Diese <strong>erste Phase</strong>, die <em>jedes</em> Event durchläuft, nennt man <strong>CAPTURING-PHASE</strong>, und sie dauert, so man sie nicht unterbricht, solange, bis das als Wert der Eigenschaft <code>e.target</code> hinterlegte <em>Zielelement</em> erreicht ist.</p> <p>Ist das Event also bei…</p> <p>| h1 |</p> <p>…angekommen, dann ist die <em>Capturing-Phase</em> abgeschlossen und das Event tritt in die sogenannte <strong>TARGET-PHASE</strong> ein.</p> <p>Bei den <em>meisten</em> (aber <em>nicht</em> bei allen) Event-Typen passiert an dieser Stelle nun folgendes:</p> <p>Die Liste der Vorfahrenelemente, also der <strong>Eventpfad</strong> wird umgedreht, so dass nunmehr das Zielelement an <em>erster</em>, und das globale Window-Objekt an <em>letzter</em> Stelle steht. Für unser Beispiel also:</p> <p>| h1 | header | body | document | window |</p> <p>Und jetzt beginnt das ganze Spiel von vorne, sprich, das Event durchläuft nun <em>ausgehend</em> vom Zielelement die ganze Kette der Vorfahrenelemente zurück bis hoch zu Window, und diese dritte Phase nennt man <strong>BUBBLING-PHASE</strong>.</p> <p>Wenn man nun diese (in der Regel) drei Phasen zusammennimmt, sprich man auch vom <strong>Eventfluss</strong> (<em>event-flow</em>).</p> <p>Die Phase, in welcher sich das Event gerade befindet, ist in der Event-Eigenschaft <code>eventPhase</code> hinterlegt, kann also wiefolgt ausgelesen werden:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> phase <span class="token operator">=</span> e<span class="token punctuation">.</span>eventPhase <span class="token comment">// z.B. 1 / 'CAPTURING_PHASE'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Mit diesem Hintergrund wissen können wir uns also der Frage zuwenden, was <em>Event Delegation</em> bedeutet.</p> <p><strong>Event Delegation</strong></p> <p>Event Delegation bedeutet, ein Event auf seinem Weg durch das DOM an einer <em>anderen</em> Stelle abzufangen, als an dessen Zielelement.</p> <p>Denn während das Event die Vorfahrenelemente des <em>Event Target</em> passiert, werden alle für diese Elemente registrierten Event Listener ausgelöst, die für diesen Event-Typ bestimmt sind!</p> <p>Um also in unserem Beispiel zu bleiben, könnten wir den Event Listener statt für H1 zum Beispiel auch für BODY registrieren:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'h1'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// do something</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das heißt es ist möglich, Ereignisse an einer anderen Stelle zu verarbeiten, als direkt am Zielelement.</p> <p>Man kann also statt für jedes einzelne DOM-Objekt Event Listener zu registrieren, auch einen <em>einzigen</em> Eventlistener auf einer höheren Hierarchieebene registrieren, um die Selektion der Zielelemente dann mittels der in <code>e.target</code> hinterlegten Werte <em>innerhalb</em> der Callback-Funktion vorzunehmen.</p> <p>Dadurch lässt sich der Code zur Eventverarbeitung deutlich übersichtlicher strukturieren.</p> <p>Man könnte sich das Ganze also in etwa vorstellen wie die Fahrt mit einem Bus im öffentlichen Nahverkehr:</p> <p>Das heißt, zunächst steht der Bus im Depot (<em>Window</em>), wo der Busfahrer einen Plan für seine Route überreicht bekommt (<em>Eventpath</em>), in dem alle seine Stationen vom Depot bis hin zur Endhaltestelle (<em>Event Target</em>) verzeichnet sind.</p> <p>Dann fährt der Bus los, verlässt das Depot und steuert die erste Haltestelle an.</p> <p>Steht da nun ein Passagier der…</p> <ul> <li>auf einen Bus wartet (ist also ein Event Listener für dieses Objekt registriert)</li> <li>und will der Passagier auch genau mit diesem Bus fahren (stimmt der Event-Typ)</li> </ul> <p>…dann steigt der Passagier in den Bus ein (die Callback-Funktion des Event Listeners wird also aufgerufen).</p> <p>Steht dort kein potentieller Fahrgast, fährt der Bus auf seiner festgelegten Route einfach weiter in Richtung seines Ziels, und bei jeder Haltestelle (jedem Element auf dem Eventpfad) wiederholt sich die Prozedur.</p> <p>An seiner Endhaltestelle angekommen dreht der Bus dann um und fährt wieder zurück zum Depot, wobei dann (in der Regel) wieder alle Haltestellen abgeklappert werden.</p> <p>Dabei ist aber nun folgendes zu beachten: <em>Nicht jedes Event</em> verfügt über eine <strong>Bubbling-Phase</strong>!</p> <p>Bestimmte Events, wie z.B. <strong>focus</strong> oder <strong>load</strong> haben von Natur aus nur zwei Eventphasen, nämlich die <strong>Capturing-Phase</strong> und die <strong>Target-Phase</strong>.</p> <p>Das bedeutet, dass wenn man solche Events delegieren will, man sie in ihrer Capturing-Phase abfangen muss, sprich, man muss das <em>optionale</em> dritte Argument für die <code>addEventListener</code>-Methode, deren <em>Defaultwert</em> <code>false</code> ist, auf <code>true</code> setzen:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'focus'</span><span class="token punctuation">,</span> callback<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Hierbei ist zu beachten, dass, je nach dem welchen Wert die Capturing-Variable innehat und je nach dem ob das Event überhaupt bubbelt, die derart registrierten Event Listener nur <strong>entweder</strong> in ihrer Capturing-Phase <strong>oder</strong> in ihrer Bubbling-Phase ausgelöst werden.</p> <p>Davon abgesehen ist aber noch interessant zu wissen, dass - um in unserem Beispiel zu bleiben - es nicht nur sein kann, dass der Bus von seiner Endhaltestelle (<em>Event Target</em>) direkt wieder zum Depot (<em>Window</em>) fährt, da es keine Bubbling-Phase gibt, sondern die Reise des Busses auch manuell unterbrochen werden kann, durch zwei Methoden der <em>Event</em>-Schnittstelle, nämlich <code>stopPropagation( )</code> und <code>stopImmediatePropagation( )</code>:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// oder auch e.stopImmediatePropagation( );</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Es ist also in etwa so, als wenn ein Fahrgast in den Bus einsteigt, dem Fahrer eine Knarre an die Rübe hält und anordnet, <em>keine</em> weiteren Haltestellen anzufahren (<em>stopPropagation</em>), sprich, keine Event Listener mehr auszulösen, die für <em>andere</em> Elemente registriert sind, als für dasjenige, welches als <code>e.currentTarget</code> hinterlegt ist.</p> <p>Oder im Falle von stopImmediatePropagation( )` auch an dieser Haltestelle <em>keine</em> weiteren Fahrgäste mehr einsteigen zu lassen, also <em>überhaupt keine</em> anderen Event Listener mehr auszulösen, nicht nur bei anderen Elementen nicht, sondern auch keinen weiteren, für diesen Event-Typ in der mit dem <em>Current Target</em> assoziierten Liste von Event Listenern hinterlegten Handler mehr auszulösen.</p> <p>Über das Geschriebene hinaus stellt die Schnittstelle <em>Event</em> noch weitere Eigenschaften und Methoden bereit, die ich aus Platzgründen hier jedoch nicht beschreibe, zumal das alles ja auch anderswo nachgelesen werden kann.</p> <p>Zu erwähnen sei hier höchstens noch die Methode <code>e.preventDefault</code>, mit der sich, so dies grundsätzlich im Einzelfall möglich ist, die Ausführung einer Defaultaktion des User Agents aussetzen lässt. <em>Ob</em> dies möglich ist, kann über die Eigenschaft <code>e.cancelable</code> in Erfahrung gebracht werden.</p> <p>Also das war jetzt eine Menge Text, aber wirklich schwer zu verstehen ist es eigentlich nicht.</p> <p>Hoffe ich. ;-)</p> <p>Gruß,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648708?srt=yes#m1648708 Felix Riesterer http://felix-riesterer.de 2015-08-27T11:53:09Z 2015-08-27T11:53:09Z Event Handling und Event Delegation <p>Lieber Orlok,</p> <blockquote> <p>Also das war jetzt eine Menge Text, aber wirklich schwer zu verstehen ist es eigentlich nicht.</p> </blockquote> <p>und jetzt noch ins Wiki damit... ;-)</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648710?srt=yes#m1648710 1unitedpower 2015-08-27T14:18:31Z 2015-08-27T14:18:31Z Event Handling und Event Delegation <p>Wahnsinnserklärung! Könntest du daraus einen Wiki-Artikel machen? Damit würdest du mir und Matthias Scharwies, der mich mal gebeten hat, diesen Artikel zu schreiben, eine riesige Freude bereiten. Ich komm leider momentan selber nicht dazu.</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648721?srt=yes#m1648721 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2015-08-27T19:32:38Z 2015-08-27T19:32:38Z Event Handling und Event Delegation <p>@@Orlok</p> <blockquote> <p>Wobei zu beachten ist, dass <em>keine identischen</em> Event Listener für <em>ein</em> Element existieren dürfen, sprich, wenn man für das gleiche Element <em>mehr</em> als einen Event Listener mit den <em>selben</em> Argumenten registriert, dann wird der bestehende Listeneintrag durch die nachfolgenden überschrieben. Aber das nur nebenbei.</p> </blockquote> <p>Diese Nebenbemerkung hättest du dir verkneifen können. ;-) Da irrst du nämlich, glaub ich.</p> <p>Eben da liegt der Unterschied. Hier wird überschrieben:</p> <pre><code class="block language-javascript">myElement<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 2</span> </code></pre> <p>Hier hingegen nicht:</p> <pre><code class="block language-javascript">myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 1</span> <span class="token comment">// 2</span> </code></pre> <p>Gegenseitig überschreiben sich <code>on…</code> und <code>addEventListener</code> auch nicht:</p> <pre><code class="block language-javascript">myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 1</span> <span class="token comment">// 2</span> <span class="token comment">// 3</span> </code></pre> <p>Ebenso wie:</p> <pre><code class="block language-javascript">myElement<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 1</span> <span class="token comment">// 2</span> <span class="token comment">// 3</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> Ist diese Antwort <em>anstößig</em>? Dann könnte sie <a href="http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860" rel="noopener noreferrer"><em>nützlich</em></a> sein. </div> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648711?srt=yes#m1648711 Matthias Scharwies mscharwies@selfhtml.org 2015-08-27T15:21:50Z 2015-08-27T15:21:50Z Event Handling und Event Delegation <p>Servus!</p> <p>Das wäre super! Der Beitrag würde hier passen: <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event" rel="nofollow noopener noreferrer">JavaScript/Objekte/DOM/event</a></p> <p>Vielen Dank im Voraus!</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648712?srt=yes#m1648712 Orlok 2015-08-27T15:26:28Z 2015-08-27T15:26:28Z Event Handling und Event Delegation <p>Hallo</p> <blockquote> <p>Wahnsinnserklärung! Könntest du daraus einen Wiki-Artikel machen? Damit würdest du mir und Matthias Scharwies, der mich mal gebeten hat, diesen Artikel zu schreiben, eine riesige Freude bereiten.</p> </blockquote> <p>Das hat Felix ja schon <a href="http://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648708#m1648708" rel="noopener noreferrer">aufgebracht</a>, der an dieser Stelle auch <em>ganz lieb</em> gegrüßt sei. ;-)</p> <p>In der Tat ist mir bei der Lektüre des Wikis schon aufgefallen, dass da insbesondere in der JavaScript-Sektion, vorsichtig formuliert, <em>einiges</em> im Argen liegt, und <em>ganz besonders</em> im Hinblick auf Events und Eventverarbeitung…</p> <p>Ich meine, schon die strukturelle Aufteilung ist einigermaßen unglücklich:</p> <p>Denn dadurch, dass die einzelnen Events unter der Rubrik <a href="http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler" rel="nofollow noopener noreferrer">Event-Handler</a> aufgelistet sind, statt direkt unter <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event" rel="nofollow noopener noreferrer">Events</a>, entsteht einerseits der fatale Eindruck, dass <em>diese</em> Methode der Eventverarbeitung der allgemeine Standard wäre, was dazu führt, dass die in der letztgenannten Rubrik etwas versteckte <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event/addEventListener" rel="nofollow noopener noreferrer">addEventListener</a>-Methode - wie man hier im Forum gut beobachten kann - weithin ignoriert wird…</p> <p>…und andererseits führt dies dazu, dass die einzelen Events von den Benutzern mit den Handlern <em>assoziiert</em> werden, so dass man hier immer wieder sowas liest wie:</p> <p>„Das onclick-Event…“ - was natürlich Quatsch ist.</p> <p>Auch herrscht bei der Beschreibung der Methoden der Event-Schnittstelle einigermaßen Ebbe, zumal beispielsweise <code>event.stopImmediatePropagation( )</code> gar nicht aufgeführt ist, und <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event/stopPropagation" rel="nofollow noopener noreferrer">stopPropagation( )</a> und <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event/preventDefault" rel="nofollow noopener noreferrer">preventDefault( )</a> mit einem Einzeiler und ein paar weiterführenden Links abgespeist werden, um nur mal ein paar sehr augenscheinliche Defizite aufzuzählen…</p> <p>Die Sache ist nur die, dass ich den Post hier eigentlich nur deswegen rausgehauen habe, da mir in einigen aktuellen Threads so manche Wissenslücke hinsichtlich der Eventverarbeitung aufgefallen war, und ich das Gefühl hatte, meine dort häppchenweise vorgetragenen Hinweise würden ignoriert. ;-)</p> <p>Jedenfalls ist klar, dass auch <a href="http://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648707#m1648707" rel="noopener noreferrer">dieser Post</a> lediglich eine <strong>sehr grobe</strong> Zusammenfassung der Materie darstellt, und wenn man einen echten Artikel zu dem Thema schreiben wollte, dann müsste man hier noch <strong>sehr viel mehr</strong> Informationen hinzufügen, wie du sicher selbst weißt.</p> <p>Womit wir bei…</p> <blockquote> <p>Ich komm leider momentan selber nicht dazu.</p> </blockquote> <p>…wären. ;-)</p> <p>Für die nächsten zwei Wochen bin ich mit meinem Studium noch voll eingespannt und habe auch selbst absolut nicht die Zeit, mich <em>dieser</em> Aufgabe zu widmen, aber <strong>danach</strong> könnte ich mich durchaus mal dransetzen.</p> <p>Zwar wollte ich eigentlich zuerst die <strong>Array</strong>-Sektion aufmöbeln, aber ich kann gerne das Eventhandling auf meiner Prioritätenliste fürs Wiki auf Platz 1 setzen und mich darum kümmern, sobald ich hier wieder etwas Luft zum atmen habe… ;-)</p> <p>Gruß,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648718?srt=yes#m1648718 Matthias Scharwies mscharwies@selfhtml.org 2015-08-27T17:43:25Z 2015-08-27T17:43:25Z Event Handling und Event Delegation <p>Servus!</p> <blockquote> <p>In der Tat ist mir bei der Lektüre des Wikis schon aufgefallen, dass da insbesondere in der JavaScript-Sektion, vorsichtig formuliert, <em>einiges</em> im Argen liegt, und <em>ganz besonders</em> im Hinblick auf Events und Eventverarbeitung…</p> </blockquote> <p>Ja, das ist eine Riesenbaustelle, bei der oft auch die ToDos fehlen.</p> <blockquote> <p>Ich meine, schon die strukturelle Aufteilung ist einigermaßen unglücklich:</p> <p>Denn dadurch, dass die einzelnen Events unter der Rubrik <a href="http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler" rel="nofollow noopener noreferrer">Event-Handler</a> aufgelistet sind, statt direkt unter <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event" rel="nofollow noopener noreferrer">Events</a>,</p> </blockquote> <p>Würdest Du das auf <strong>einer</strong> Seite alles zusammengefasst haben wollen?</p> <p>@Felix Riesterer @1unitedpower @Matthias Apsel @dedlfix Was haltet Ihr davon?</p> <p>Ich würde die Event-Handler gerne dort lassen, sie aber wie in den Referenzen alphabetisch ordnen und in solche Tabellen formatieren: <a href="http://wiki-test.selfhtml.org/wiki/JavaScript/Event-Handler/onclick" rel="nofollow noopener noreferrer">Test-Wiki: JavaScript/Event-Handler/onclick</a></p> <blockquote> <p>Auch herrscht bei der Beschreibung der Methoden der Event-Schnittstelle einigermaßen Ebbe, zumal beispielsweise <code>event.stopImmediatePropagation( )</code> gar nicht aufgeführt ist, und <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event/stopPropagation" rel="nofollow noopener noreferrer">stopPropagation( )</a> und <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event/preventDefault" rel="nofollow noopener noreferrer">preventDefault( )</a> mit einem Einzeiler und ein paar weiterführenden Links abgespeist werden, um nur mal ein paar sehr augenscheinliche Defizite aufzuzählen…</p> </blockquote> <p>Full ACK, bei einem ist wenigstens ein ToDo drin.</p> <blockquote> <p>Zwar wollte ich eigentlich zuerst die <strong>Array</strong>-Sektion aufmöbeln, aber ich kann gerne das Eventhandling auf meiner Prioritätenliste fürs Wiki auf Platz 1 setzen und mich darum kümmern, sobald ich hier wieder etwas Luft zum atmen habe… ;-)</p> </blockquote> <p>Eine Mitarbeit von Dir (und auch anderen) ist jederzeit willkommen!</p> <blockquote> <p>Gruß,</p> <p>Orlok</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648720?srt=yes#m1648720 Orlok 2015-08-27T18:00:52Z 2015-08-27T18:00:52Z Event Handling und Event Delegation <p>Hallo</p> <blockquote> <blockquote> <p>Ich meine, schon die strukturelle Aufteilung ist einigermaßen unglücklich:</p> <p>Denn dadurch, dass die einzelnen Events unter der Rubrik <a href="http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler" rel="nofollow noopener noreferrer">Event-Handler</a> aufgelistet sind, statt direkt unter <a href="http://wiki.selfhtml.org/wiki/JavaScript/Objekte/DOM/event" rel="nofollow noopener noreferrer">Events</a>,</p> </blockquote> <p>Würdest Du das auf <strong>einer</strong> Seite alles zusammengefasst haben wollen? […]</p> <p>Ich würde die Event-Handler gerne dort lassen, sie aber wie in den Referenzen alphabetisch ordnen und in solche Tabellen formatieren […]</p> </blockquote> <p>Nein, die „Event-<strong>Handler</strong>“ können bleiben wo sie sind, aber die unterschiedlichen <strong>Events</strong> sollten IMHO unter der gleichnamigen Rubrik aufgeführt sein.</p> <p>Es gibt kein <code>onload</code>-Event und erst recht kein <code>onLoad</code>-Event, sondern nur einen <code>load</code>-Eventtyp, ich meine, das ist genau die Art von <strong>Konfusion</strong>, auf die ich mit meiner Kritik hinweisen wollte… ;-)</p> <p>Die <strong>Events</strong> sollten meiner Meinung nach von den <strong>Eventhandling</strong>-Methoden getrennt sein, statt, wie es im Moment ist, mit einer <em>nicht</em> zu empfehlenden Methode verknüpft zu sein.</p> <p>Wenn man etwas zum 'click'-Event in Erfahrung bringen möchte sollte nicht das Erste was man sieht die folgende Zeile sein:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span>onclick <span class="token operator">=</span> handler<span class="token punctuation">;</span> </code></pre> <p>…und erst recht nicht wie <a href="http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler/onclick" rel="nofollow noopener noreferrer">hier</a> als HTML-Attribut…</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> Do it! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>U know what I mean?</p> <p>Gruß,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648723?srt=yes#m1648723 Matthias Scharwies mscharwies@selfhtml.org 2015-08-27T19:53:35Z 2015-08-27T19:53:35Z Event Handling und Event Delegation <p>Servus!</p> <blockquote> <p>Es gibt kein <code>onload</code>-Event und erst recht kein <code>onLoad</code>-Event, sondern nur einen <code>load</code>-Eventtyp, ich meine, das ist genau die Art von <strong>Konfusion</strong>, auf die ich mit meiner Kritik hinweisen wollte… ;-)</p> <p>Die <strong>Events</strong> sollten meiner Meinung nach von den <strong>Eventhandling</strong>-Methoden getrennt sein, statt, wie es im Moment ist, mit einer <em>nicht</em> zu empfehlenden Methode verknüpft zu sein.</p> <p>Wenn man etwas zum 'click'-Event in Erfahrung bringen möchte sollte nicht das Erste was man sieht die folgende Zeile sein:</p> <pre><code class="block language-javascript">element<span class="token punctuation">.</span>onclick <span class="token operator">=</span> handler<span class="token punctuation">;</span> </code></pre> <p>…und erst recht nicht wie <a href="http://wiki.selfhtml.org/wiki/JavaScript/Event-Handler/onclick" rel="nofollow noopener noreferrer">hier</a> als HTML-Attribut…</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">handler</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> Do it! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>U know what I mean?</p> </blockquote> <p>Ja, stimmt!</p> <p>Matthias Scharwies</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648722?srt=yes#m1648722 Orlok 2015-08-27T19:50:54Z 2015-08-27T19:57:26Z Event Handling und Event Delegation <p>Hallo</p> <blockquote> <blockquote> <p>Wobei zu beachten ist, dass <em>keine identischen</em> Event Listener für <em>ein</em> Element existieren dürfen, sprich, wenn man für das gleiche Element <em>mehr</em> als einen Event Listener mit den <em>selben</em> Argumenten registriert, dann wird der bestehende Listeneintrag durch die nachfolgenden überschrieben. Aber das nur nebenbei.</p> </blockquote> <p>Diese Nebenbemerkung hättest du dir verkneifen können. ;-) Da irrst du nämlich, glaub ich.</p> </blockquote> <p>Von <code class="language-javascript">element<span class="token punctuation">.</span>onclick</code> habe ich nichts geschrieben, da ich hoffte, durch konsequentes Ignorieren aller anderen Methoden die Leser dazu zu bringen, Events grundsätzlich mit der <code>addEventListener</code>-Methode zu verarbeiten. ;-)</p> <p>Ich <a href="http://www.w3.org/TR/dom/#concept-event-listener" rel="nofollow noopener noreferrer">zitiere</a> mal:</p> <p>„The addEventListener(type, callback, capture) method must run these steps:</p> <ul> <li> <p>If callback is null, terminate these steps.</p> </li> <li> <p>Append an event listener to the associated list of event listeners with type set to type, callback set to callback, and capture set to capture, <strong>unless there already is an event listener in that list with the same type, callback, and capture</strong>.“</p> </li> </ul> <p>Wenn du eine <strong>anonyme Funktion</strong> als Callback-Argument übergibst, wird in Ermangelung eines Bezeichners zur Differenzierung vermutlich der Function-Body verglichen und…</p> <pre><code class="block language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">!==</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> </code></pre> <p>…weshalb hier <em>nicht</em> die <strong>selben</strong> Argumente übergeben wurden. ;-)</p> <p>Geirrt habe ich aber trotzdem, da der erste Eintrag nicht überschrieben wird, sondern der zweite <em>nicht hinzugefügt</em> wird!</p> <p>Gruß,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648725?srt=yes#m1648725 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2015-08-27T20:08:46Z 2015-08-27T20:08:46Z Event Handling und Event Delegation <p>@@Orlok</p> <blockquote> <p>Wenn du eine <strong>anonyme Funktion</strong> als Callback-Argument übergibst, wird in Ermangelung eines Bezeichners zur Differenzierung vermutlich der Function-Body verglichen und…</p> <pre><code class="block language-javascript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">!==</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> </code></pre> </blockquote> <p>Sieht nicht so aus, denn</p> <pre><code class="block language-javascript">myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 1</span> <span class="token comment">// 1</span> </code></pre> <p>Es sind immer noch unterschiedliche Funktionsobjekte<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p> <p>Aber ich verstehe, worauf du hinauswillst:</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">log1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> log1<span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> log1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 1</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> Ist diese Antwort <em>anstößig</em>? Dann könnte sie <a href="http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860" rel="noopener noreferrer"><em>nützlich</em></a> sein. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Ist das sprachlich korrekt? <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648726?srt=yes#m1648726 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2015-08-27T20:12:34Z 2015-08-27T20:12:34Z Event Handling und Event Delegation <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Wenn du eine <strong>anonyme Funktion</strong> als Callback-Argument übergibst …</p> </blockquote> <p>Sieht nicht so aus</p> </blockquote> <p>Und das auch nicht bei nicht anonymen Funktionen:</p> <pre><code class="block language-javascript">myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">log1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> myElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">log1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Ausgabe:</span> <span class="token comment">// 1</span> <span class="token comment">// 1</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> Ist diese Antwort <em>anstößig</em>? Dann könnte sie <a href="http://forum.selfhtml.org/self/2015/jun/21/select-felder/1643860#m1643860" rel="noopener noreferrer"><em>nützlich</em></a> sein. </div> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648728?srt=yes#m1648728 Orlok 2015-08-27T20:20:41Z 2015-08-27T20:20:41Z Event Handling und Event Delegation <p>Hallo</p> <blockquote> <p>Es sind immer noch unterschiedliche Funktionsobjekte.</p> </blockquote> <p>Sind sie.</p> <p>„the <strong>same</strong> callback“</p> <p>Oh man, ich bin nicht mehr auf der Höhe…</p> <p>Gruß,</p> <p>Orlok</p> https://forum.selfhtml.org/self/2015/aug/24/dynamisches-element-erstellen-mit-nummer-innerhalb-der-href-anweisung/1648729?srt=yes#m1648729 Der Martin 2015-08-27T21:08:37Z 2015-08-27T21:08:37Z Event Handling und Event Delegation <p>Hallo,</p> <blockquote> <p>Es sind immer noch unterschiedliche Funktionsobjekte.</p> <p>Ist das sprachlich korrekt?</p> </blockquote> <p>kommt drauf an, was du wirklich meinst. Unterschiedlich heißt für mich verschiedenartig. Verschieden heißt möglicherweise gleichartig, aber nicht identisch.</p> <p>So long,<br>  Martin</p>