tag:forum.selfhtml.org,2005:/self JavaScript - Problem mit addEventListener – SELFHTML-Forum 2018-01-03T12:57:13Z https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711102#m1711102 Friedel 2018-01-02T08:56:13Z 2018-01-02T08:56:13Z JavaScript - Problem mit addEventListener <p>Hallo, ich möchte gerne einem Button mit JavaScript Leben einhauchen. Dazu möchte ich addEventListener verwenden. Aber offensichtlich funktioniert das nicht so, wie ich erwartet habe. Die vielen Beschreibungen dazu, die ich in den letzten Stunden gelesen habe, sind offensichtlich alle voneinander abgeschrieben und kaum brauchbar.</p> <p>Im Html steht nur ein Button, der disabled ist.</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>o1<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Im Script habe ich jetzt stehen:</p> <pre><code class="block language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onload</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> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'o1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>disabled<span class="token operator">=</span><span class="token boolean">false</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">'o1'</span><span class="token punctuation">)</span><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 function">ordnerauf</span><span class="token punctuation">(</span><span class="token string">"xxx"</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">function</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>Ich hatte erwartet, dass der Button aktiv wird, wenn die Seite geladen ist. Das funktioniert auch. Außerdem habe ich erwartet, dass der Button einen Eventhandler bekommt, der etwa das gleiche macht, wie onClick. Wenn der Button angeklickt wird, soll die Funktion ordnerauf() aufgerufen werden. Das klappt aber nicht. ordnerauf() wird sofort aufgerufen. Wenn man den Button anklickt, passiert nichts.</p> <p>Wer kann mir erklären, was ich falsch mache?</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711104#m1711104 Christian Kruse https://wwwtech.de/about 2018-01-02T09:06:03Z 2018-01-02T09:13:53Z JavaScript - Problem mit addEventListener <p>Hallo Friedel,</p> <blockquote> <pre><code class="block language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onload</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> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'o1'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>disabled<span class="token operator">=</span><span class="token boolean">false</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">'o1'</span><span class="token punctuation">)</span><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 function">ordnerauf</span><span class="token punctuation">(</span><span class="token string">"xxx"</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">function</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Das geht so nicht, <code>addEventListener()</code> erwartet eine Funktionsreferenz. Was du dort tust ist <code>ordnerauf()</code> ausführen und dann den Rückgabewert an <code>addEventListener()</code> geben. Du könntest das etwa so umgehen:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'o1'</span><span class="token punctuation">)</span><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> ordnerauf<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Offensichtlich kannst du so natürlich keine Argumente übergeben. Falls das notwendig ist, könntest du mit einer anonymen Funktion arbeiten:</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'o1'</span><span class="token punctuation">)</span><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> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token string">"xxx"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711110#m1711110 Felix Riesterer http://felix-riesterer.de 2018-01-02T10:36:50Z 2018-01-02T10:36:50Z JavaScript - Problem mit addEventListener <p>Lieber Friedel,</p> <blockquote> <pre><code class="block language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onload</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> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>besser ist es heute anstelle von <code>window.onload</code> eben <code>addEventListener</code> auf das <code>document</code>-Objekt anzuwenden:</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">"DOMContentLoaded"</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 comment">// tuwat</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das dafür notwendige Event lautet "DOMContentLoaded" (GrOß-/kLeInScHrEiBuNg beachten!).</p> <blockquote> <pre><code class="block language-javascript"> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'o1'</span><span class="token punctuation">)</span><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 function">ordnerauf</span><span class="token punctuation">(</span><span class="token string">"xxx"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span> <span class="token keyword">function</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Wenn Du nun einem HTML-Element ein Event andichten willst, ist es nicht sinnvoll, den Rückgabewert einer Funktion zuzuweisen. Besser Du übermittelst eine Funktion selbst:</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> ordnerauf<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Wenn Du der das Event verarbeitenden Funktion, in Deinem Falle <code>ordnerauf</code>, noch einen Parameter mitgeben willst, dann geht das so:</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> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token string">"abc"</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> <p>Sinnvoller wäre es allerdings, wenn die das Event verarbeitende Funktion, die ohnehin ein Eventobjekt erhält, selbst entscheiden darf, was zu tun ist:</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 parameter">eventObj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// standard vs. IE < 9</span> <span class="token keyword">var</span> myElement <span class="token operator">=</span> eventObj<span class="token punctuation">.</span>target <span class="token operator">||</span> eventObj<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>myElement<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span>myElement<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> <p>Wenn <code>ordnerauf</code> nicht den Namen einer ID, sondern das Element selbst verarbeiten kann, wäre obige Lösung einfacher zu handhaben, da Du alle Deine Buttons mit einer simplen Schleife auf diese Funktion trainierst:</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">"DOMContentLoaded"</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">var</span> uls <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">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> uls<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> uls<span class="token punctuation">[</span>i<span class="token punctuation">]</span><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">eventObj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// standard vs. IE < 9</span> <span class="token keyword">var</span> myElement <span class="token operator">=</span> eventObj<span class="token punctuation">.</span>target <span class="token operator">||</span> eventObj<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>myElement<span class="token punctuation">.</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span>myElement<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><span class="token punctuation">;</span> </code></pre> <p>Wenn man jetzt ohnehin in der Funktion darauf prüft, ob das <code>ul</code>-Element eine ID hat, um nur dann <code>ordnerauf</code> auszuführen, kann man sich die Mühe sparen, allen <code>ul</code>-Elementen einzeln einen Listener für das <code>click</code>-Event einzurichten. Stattdessen registriert man einen Listener für das <code>body</code>-Element:</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">"DOMContentLoaded"</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> 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">eventObj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// standard vs. IE < 9</span> <span class="token keyword">var</span> myElement <span class="token operator">=</span> eventObj<span class="token punctuation">.</span>target <span class="token operator">||</span> eventObj<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>myElement<span class="token punctuation">.</span>tagName <span class="token comment">// is not simple text node</span> <span class="token operator">&&</span> myElement<span class="token punctuation">.</span>tagName<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^ul$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span> <span class="token comment">// is <ul></span> <span class="token operator">&&</span> myElement<span class="token punctuation">.</span>id <span class="token comment">// has ID</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span>myElement<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><span class="token punctuation">;</span> </code></pre> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711105#m1711105 Friedel 2018-01-02T09:15:37Z 2018-01-02T09:15:37Z JavaScript - Problem mit addEventListener <p>Aha. Danke. So klappt es.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711106#m1711106 Friedel 2018-01-02T09:38:54Z 2018-01-02T09:38:54Z JavaScript - Problem mit addEventListener <p>Mist. Jetzt hab ich das nächste Problem.</p> <p>Eigentlich geht es um mehrere Buttons. Jeder hat eine id, die aus dem Buchstaben o und einer fortlaufenden Nummer besteht.</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>o1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>o2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>o3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</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>o4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Mit</p> <pre><code class="block language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onload</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> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span> i<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">'ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><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">'o'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><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><span class="token function">ordnerauf</span><span class="token punctuation">(</span>i<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 keyword">function</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>wollte ich jetzt eigentlich erreichen, dass jeder Button beim Anklicken seine Nummer in der Alertbox wiedergibt. Aber jetzt geben sie natürlich alle die Nummer des letzten Buttons aus. Ich glaube, ich habe einen Knoten im Hirn. Wie macht man sowas?</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711107#m1711107 Auge 2018-01-02T09:43:31Z 2018-01-02T20:07:48Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <p>Eigentlich geht es um mehrere Buttons. Jeder hat eine id, die aus dem Buchstaben o und einer fortlaufenden Nummer besteht.</p> <p>Mit</p> <pre><code class="block language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onload</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> <span class="token keyword">for</span><span class="token punctuation">(</span>i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span> i<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">'ul'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><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">'o'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><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><span class="token function">ordnerauf</span><span class="token punctuation">(</span>i<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 keyword">function</span> <span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token parameter">a</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>wollte ich jetzt eigentlich erreichen, dass jeder Button beim Anklicken seine Nummer in der Alertbox wiedergibt. Aber jetzt geben sie natürlich alle die Nummer des letzten Buttons aus. Ich glaube, ich habe einen Knoten im Hirn. Wie macht man sowas?</p> </blockquote> <ol> <li>Registriere das Event an einem Elternelement aller Buttons.</li> <li>Ermittle das Element/den Button, der das Event ausgelöst hat, innerhalb der aufgerufenen Funktion <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">mit <code>event.target</code></a>. Das Beispiel auf der verlinkten Wikiseite sollte selbsterklärend sein.</li> </ol> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711108#m1711108 Christian Kruse https://wwwtech.de/about 2018-01-02T09:51:40Z 2018-01-02T09:51:40Z JavaScript - Problem mit addEventListener <p>Hallo Auge,</p> <blockquote> <ol> <li>Registriere das Event an einem Elternelement aller Buttons.</li> <li>Ermittle das Element/den Button, der das Event ausgelöst hat, innerhalb der aufgerufenen Funktion <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">mit <code>event.target</code></a>. Das Beispiel auf der verlinkten Wikiseite sollte selbsterklärend sein.</li> </ol> </blockquote> <p>Ja, das ist die richtige Lösung. <a href="https://molily.de/js/event-handling-effizient.html" rel="nofollow noopener noreferrer">Molily hat darüber etwas geschrieben.</a></p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711186#m1711186 Friedel 2018-01-02T20:11:43Z 2018-01-02T20:16:31Z JavaScript - Problem mit addEventListener <p>Nein, das Beispiel auf den verlinkten Wikiseite ist leider nicht selbsterklärend und ich verstehe es auch nicht. Es wäre schön, wenn in solchen Beispielen nur eine Sache gezeigt würde. Die Beispiele sind immer sehr komplex. Ich kann damit nicht anfangen.</p> <p>Ich habe lange mit event.target rumprobiert, aber ich erreiche damit nichts brauchbares.</p> <p>Edit: Offensichtlich ist es in diesem Forum nicht möglich, dass meine Antwort im Threadbaum dort erscheint, wo sie hin gehört. Dies ist eine Antwort auf den Beitrag von Auge von 02.01.2018 10:43. Dass sie ganz wo anders steht, halte ich für einen gravierenden Bug im Forum.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711109#m1711109 Friedel 2018-01-02T10:21:58Z 2018-01-02T10:23:58Z JavaScript - Problem mit addEventListener <p>Danke. Im Moment habe ich keine Zeit mehr dafür, aber heute nachmittag geht es weiter. Ich hatte mir inzwischen mit</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'o'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><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><span class="token function">ordnerauf</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>geholfen. Das funktioniert. Was ist der Unterschied? Mit event.target habe ich es noch nicht zum Laufen gebracht. Was ist mit</p> <blockquote> <p>Registriere das Event an einem Elternelement aller Buttons.</p> </blockquote> <p>gemeint?</p> <p>Damit kann ich nichts anfangen. Es soll doch nur dann etwas passieren, wenn einer der Buttons angeklickt wird, nicht wenn sonst irgendwo geklickt wird. Die Buttons haben zwar alle einen gemeinsamen Vorfahren, aber kein direktes Elternelement gemeinsam. Und dieser gemeinsame Vorfahr enthält natürlich sehr viel anderes, als nur die Buttons.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711116#m1711116 Auge 2018-01-02T11:25:34Z 2018-01-02T11:25:34Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <p>Was ist mit</p> <blockquote> <p>Registriere das Event an einem Elternelement aller Buttons. gemeint?</p> </blockquote> <p>Damit kann ich nichts anfangen. Es soll doch nur dann etwas passieren, wenn einer der Buttons angeklickt wird, nicht wenn sonst irgendwo geklickt wird.</p> </blockquote> <p>Wie der <a href="https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711108#m1711108" rel="noopener noreferrer">bei Christian</a> verlinkte <a href="https://molily.de/js/event-handling-effizient.html" rel="nofollow noopener noreferrer">Artikel von Molily</a> erklärt, gibt es die Event Delegation. Ein Klick auf einen Button wird nicht nur bei dem Button selbst registriert (im Sinne von „bemerkt“), sondern durch das „Event Bubbling“ auch von dessen Elternelementen.</p> <p>Im Falle von vielen gleichartigen Events, wie er auch auf deine Buttonsammlung zutrifft, muss so nur <strong>ein</strong> Event registriert werden statt der N Events für jeden Button. Das verbraucht weniger Ressourcen, da erst einmal nur ein (Eltern)-Element statt der vielen Kindelemente, an denen der Event ausgelöst wird, überwacht werden muss.</p> <blockquote> <p>Die Buttons haben zwar alle einen gemeinsamen Vorfahren, aber kein direktes Elternelement gemeinsam. Und dieser gemeinsame Vorfahr enthält natürlich sehr viel anderes, als nur die Buttons.</p> </blockquote> <p>Du kannst einerseits den Buttons in ein gruppierendes Element einschließen und das Event für dieses gruppierende Element registrieren. Du kannst das Event aber auch beim gemeinsamen Vorfahr registrieren und über den mit <code>event.target</code> ermittelten Wert prüfen, ob überhaupt ein Button betätigt wurde und nur dann den Code ausführen. Was sinnvoller ist, kommt auf eventuell vorhandene weitere Funktionen und die tatsächliche HTML-Struktur an.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711128#m1711128 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T13:08:47Z 2018-01-02T13:08:47Z JavaScript - Problem mit addEventListener <p>@@Friedel</p> <blockquote> <blockquote> <p>Registriere das Event an einem Elternelement aller Buttons. Die Buttons haben zwar alle einen gemeinsamen Vorfahren, aber kein direktes Elternelement gemeinsam.</p> </blockquote> </blockquote> <p>Auge meinte eigentlich auch: an einem <strong>Vorfahren</strong>element aller Buttons.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711111#m1711111 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-02T10:42:24Z 2018-01-02T10:42:24Z JavaScript - Problem mit addEventListener <p>Hallo Felix Riesterer,</p> <blockquote> <p><code>&& myElement.tagName.match(/^ul$/i) // is <ul></code></p> </blockquote> <p>Warum nicht <code>myElement.tagName == "UL"</code>?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711123#m1711123 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T12:30:03Z 2018-01-02T12:30:03Z JavaScript - Problem mit addEventListener <p>@@Felix Riesterer</p> <blockquote> <pre><code class="block bad language-javascript"> <span class="token keyword">var</span> myElement <span class="token operator">=</span> eventObj<span class="token punctuation">.</span>target <span class="token operator">||</span> eventObj<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>myElement<span class="token punctuation">.</span>tagName <span class="token comment">// is not simple text node</span> <span class="token operator">&&</span> myElement<span class="token punctuation">.</span>tagName<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^ul$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span> <span class="token comment">// is <ul></span> </code></pre> </blockquote> <p>Das kann nicht funktionieren. (Du weißt schon, „funktionieren“ im Sinne von „funktionieren“.)</p> <p><code>ul</code> ist kein interaktives Element, darf also nicht als Target herhalten. Target muss der jeweilige Button sein.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711117#m1711117 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T11:31:49Z 2018-01-02T12:25:48Z JavaScript - Problem mit addEventListener <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p><code>&& myElement.tagName.match(/^ul$/i) // is <ul></code></p> </blockquote> <p>Warum nicht <code>myElement.tagName == "UL"</code>?</p> </blockquote> <p>Weil es <strong>grundsätzlich falsch</strong> ist, <code>ul</code>-Elemente als Target von <code>click</code>-Events zu verwenden. Wegen unbenutzbar.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711130#m1711130 Felix Riesterer http://felix-riesterer.de 2018-01-02T13:11:00Z 2018-01-02T13:11:00Z JavaScript - Problem mit addEventListener <p>Lieber Matthias,</p> <blockquote> <p>Warum nicht <code>myElement.tagName == "UL"</code>?</p> </blockquote> <p>ist das (noch?) immer tatsächlich exakt so der Fall?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711127#m1711127 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T13:06:44Z 2018-01-02T13:06:44Z JavaScript - Problem mit addEventListener <p>@@Auge</p> <blockquote> <p>Du kannst einerseits den Buttons in ein gruppierendes Element einschließen und das Event für dieses gruppierende Element registrieren.</p> </blockquote> <p>Nein, das kannst du nicht. Das gruppierende Element ist kein interaktives Element, ist also nicht allgemein bedienbar.</p> <blockquote> <p>Du kannst das Event aber auch beim gemeinsamen Vorfahr registrieren und über den mit <code>event.target</code> ermittelten Wert prüfen, ob überhaupt ein Button betätigt wurde</p> </blockquote> <p>Das kannst du machen.</p> <p>Und zwar tatsächlich, ob ein <strong>Button</strong> betätigt wurde, nicht ein <code>ul</code>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711129#m1711129 Felix Riesterer http://felix-riesterer.de 2018-01-02T13:10:30Z 2018-01-02T13:10:30Z JavaScript - Problem mit addEventListener <p>Lieber Gunnar,</p> <blockquote> <p><code>ul</code> ist kein interaktives Element, darf also nicht als Target herhalten. Target muss der jeweilige Button sein.</p> </blockquote> <p>das ist richtig. Mir ist auch nicht klar, wie man das <code>ul</code>-Element <em>direkt</em> anklicken können sollte - aber der Lösungsansatz des OP schien wohl mit dieser Denkweise zunächst zufriedenstellend nutzbar zu sein. Also habe ich die direkte Umsetzung etwas vereinfacht. Vielleicht sogar kaputt gemacht, weil in den <code>ul</code>-Elementen sicher andere Elemente das tatsächliche <code>event.target</code>-Objekt sind.</p> <p>Wie vermittelst Du denn jetzt dem OP einen Lösungsansatz, der sowohl seinem Wissensstand als auch Deinen Ansprüchen gerecht wird? Zeig mal!</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711131#m1711131 Auge 2018-01-02T13:11:55Z 2018-01-02T13:11:55Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <blockquote> <p>Du kannst einerseits den Buttons in ein gruppierendes Element einschließen und das Event für dieses gruppierende Element registrieren.</p> </blockquote> <p>Nein, das kannst du nicht. Das gruppierende Element ist kein interaktives Element, ist also nicht allgemein bedienbar.</p> </blockquote> <p>Ach, warum sollte das gruppierende Element interaktiv sein? Dein immer wieder vorgetragenes Mantra, Eventlistener an <code><body></code> zu binden, sind also auch falsch. <code><body></code> ist schließlich kein interaktives Element.</p> <p>Danke für diese Klarstellung.</p> <blockquote> <blockquote> <p>Du kannst das Event aber auch beim gemeinsamen Vorfahr registrieren und über den mit <code>event.target</code> ermittelten Wert prüfen, ob überhaupt ein Button betätigt wurde</p> </blockquote> <p>Das kannst du machen.</p> <p>Und zwar tatsächlich, ob ein <strong>Button</strong> betätigt wurde, nicht ein <code>ul</code>.</p> </blockquote> <p>Ich weiß ja nicht, wo du dein <code>ul</code> hernimmst, von mir hast du es gewiss nicht.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711146#m1711146 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T13:49:27Z 2018-01-02T13:51:33Z JavaScript - Problem mit addEventListener <p>@@Felix Riesterer</p> <blockquote> <p>Wie vermittelst Du denn jetzt dem OP einen Lösungsansatz, der sowohl seinem Wissensstand als auch Deinen Ansprüchen gerecht wird? Zeig mal!</p> </blockquote> <p>Wurde doch schon hier im Thread gesagt: abfragen, ob <em lang="en">event target</em> ein Button ist:<br> <code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>eventObj<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'BUTTON'</span><span class="token punctuation">)</span></code> <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <p>Oder mit deinem <code class="language-js">myElement</code>. Aber ehrlich mal, <code class="language-js"><span class="token keyword">var</span> myElement <span class="token operator">=</span> eventObj<span class="token punctuation">.</span>target <span class="token operator">||</span> eventObj<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span></code> für IE < 9 braucht doch wohl kein Mensch mehr, oder?</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>bei mir heißt das immer <code class="language-js">event</code> statt <code class="language-js">eventObj</code> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711136#m1711136 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T13:35:08Z 2018-01-02T13:35:08Z JavaScript - Problem mit addEventListener <p>@@Felix Riesterer</p> <blockquote> <blockquote> <p>Warum nicht <code>myElement.tagName == "UL"</code>?</p> </blockquote> <p>ist das (noch?) immer tatsächlich exakt so der Fall?</p> </blockquote> <p>Ja, das ist spezifiziert, dass <code>tagName</code> (und <code>nodeName</code>) Elementtypbezeichner in Großbuchstaben liefern – bei HTML wohlgemerkt. [<a href="https://www.w3.org/TR/dom/#dom-element-tagname" rel="nofollow noopener noreferrer">DOM4</a>]</p> <p>Bei XML (auch bei Verarbeitungs als XHTML) sähe das schon wieder anders aus.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711140#m1711140 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T13:41:38Z 2018-01-02T13:41:38Z JavaScript - Problem mit addEventListener <p>@@Auge</p> <blockquote> <blockquote> <blockquote> <p>Du kannst einerseits den Buttons in ein gruppierendes Element einschließen und das Event für dieses gruppierende Element registrieren.</p> </blockquote> <p>Nein, das kannst du nicht. Das gruppierende Element ist kein interaktives Element, ist also nicht allgemein bedienbar.</p> </blockquote> <p>Ach, warum sollte das gruppierende Element interaktiv sein? Dein immer wieder vorgetragenes Mantra, Eventlistener an <code><body></code> zu binden, sind also auch falsch.</p> </blockquote> <p>Nein, bei <em lang="en">event delegation</em> registriert man das <code>click</code>-Event natürlich für ein nicht-interaktives Element. Da muss man dann darauf auchten, dass das Event-Target ein interaktives Element sein muss.</p> <p><em lang="en">Event delegation</em> hattest du im „Du kannst das Event aber auch“-Zweig behandelt, im „Du kannst einerseits“-Zweig (um den es hier ging) also (nach meiner Lesart) ausgeschlossen.</p> <blockquote> <p>Ich weiß ja nicht, wo du dein <code>ul</code> hernimmst, von mir hast du es gewiss nicht.</p> </blockquote> <p>Nein, das war ein Bezug auf den anderen Ast hier im Thread.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711162#m1711162 Felix Riesterer http://felix-riesterer.de 2018-01-02T15:30:59Z 2018-01-02T15:30:59Z JavaScript - Problem mit addEventListener <p>Lieber Gunnar,</p> <blockquote> <p>– bei HTML wohlgemerkt. [<a href="https://www.w3.org/TR/dom/#dom-element-tagname" rel="nofollow noopener noreferrer">DOM4</a>]</p> <p>Bei XML (auch bei Verarbeitungs als XHTML) sähe das schon wieder anders aus.</p> </blockquote> <p>eben deshalb verwende ich <code class="language-javascript">o<span class="token punctuation">.</span>tagName<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^xyz$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span></code></p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711148#m1711148 Auge 2018-01-02T13:54:15Z 2018-01-02T13:54:15Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Du kannst einerseits den Buttons in ein gruppierendes Element einschließen und das Event für dieses gruppierende Element registrieren.</p> </blockquote> <p>Nein, das kannst du nicht. Das gruppierende Element ist kein interaktives Element, ist also nicht allgemein bedienbar.</p> </blockquote> <p>Ach, warum sollte das gruppierende Element interaktiv sein? Dein immer wieder vorgetragenes Mantra, Eventlistener an <code><body></code> zu binden, sind also auch falsch.</p> </blockquote> <p>Nein, bei <em lang="en">event delegation</em> registriert man das <code>click</code>-Event natürlich für ein nicht-interaktives Element. Da muss man dann darauf auchten, dass das Event-Target ein interaktives Element sein muss.</p> </blockquote> <p>Ja, wie nun? Nichts anderes habe ich vorgeschlagen.</p> <blockquote> <p><em lang="en">Event delegation</em> hattest du im „Du kannst das Event aber auch“-Zweig behandelt, im „Du kannst einerseits“-Zweig (um den es hier ging) also (nach meiner Lesart) ausgeschlossen.</p> </blockquote> <p>Deine Lesart ist nicht die allgemeingültige Wahrheit.</p> <p>Mit dem gruppierenden Element erzeuge ich einen „neuen“ Vorfahren, um das Event an ihn zu binden, falls das denn die Sache gegenüber der Nutzung eines vorhandenen Vorfahrens vereinfachen sollte. Ich habe, wie ich <a href="https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711116#m1711116" rel="noopener noreferrer">in meinem ursprünglichen Posting</a> schon beschrieb, keine Kenntnis vom Quelltext des OP. Daher kann ich nicht beurteilen, ob es sinnvoll ist, das Event an ein bereits vorhandenes Vorfahrenelement zu binden, wenn da „zu viel“ Anderes dranhängt oder ob es einfacher und übersichtlicher ist, ein neues Vorfahrenelement nur für die Buttons zu erzeugen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711147#m1711147 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-02T13:52:09Z 2018-01-02T13:52:09Z JavaScript - Problem mit addEventListener <p>Hallo Gunnar Bittersmann,</p> <p>wie würdest du denn im konkreten Fall (verschachtelte Listen zum Aufklappen) das HTML bauen?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711149#m1711149 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T13:55:10Z 2018-01-02T15:37:18Z JavaScript - Problem mit addEventListener <p>@@Matthias Apsel</p> <blockquote> <p>wie würdest du denn im konkreten Fall (verschachtelte Listen zum Aufklappen) das HTML bauen?</p> </blockquote> <p>Ich hatte schon mal <a href="https://codepen.io/gunnarbittersmann/pen/vpmBLW" rel="noopener noreferrer">mit Basteln angefangen</a>. Aber nicht, dass das schon fertig wäre …</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711161#m1711161 Felix Riesterer http://felix-riesterer.de 2018-01-02T15:29:27Z 2018-01-02T15:29:27Z JavaScript - Problem mit addEventListener <p>Lieber Matthias,</p> <blockquote> <p>wie würdest du denn im konkreten Fall (verschachtelte Listen zum Aufklappen) das HTML bauen?</p> </blockquote> <p>auf Klick des Menü-Buttons der von mir betreuten Schulwebsite <a href="https://peutinger-gymnasium.de" rel="nofollow noopener noreferrer">könntest Du das sehen</a>.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711150#m1711150 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T14:01:15Z 2018-01-02T14:01:15Z JavaScript - Problem mit addEventListener <p>@@Auge</p> <blockquote> <blockquote> <blockquote> <blockquote> <blockquote> <p>Du kannst einerseits den Buttons in ein gruppierendes Element einschließen und das Event für dieses gruppierende Element registrieren.</p> </blockquote> <p>Nein, das kannst du nicht. Das gruppierende Element ist kein interaktives Element, ist also nicht allgemein bedienbar.</p> </blockquote> <p>Ach, warum sollte das gruppierende Element interaktiv sein? Dein immer wieder vorgetragenes Mantra, Eventlistener an <code><body></code> zu binden, sind also auch falsch.</p> </blockquote> <p>Nein, bei <em lang="en">event delegation</em> registriert man das <code>click</code>-Event natürlich für ein nicht-interaktives Element. Da muss man dann darauf auchten, dass das Event-Target ein interaktives Element sein muss.</p> </blockquote> <p>Ja, wie nun? Nichts anderes habe ich vorgeschlagen.</p> <blockquote> <p><em lang="en">Event delegation</em> hattest du im „Du kannst das Event aber auch“-Zweig behandelt, im „Du kannst einerseits“-Zweig (um den es hier ging) also (nach meiner Lesart) ausgeschlossen.</p> </blockquote> <p>Deine Lesart ist nicht die allgemeingültige Wahrheit.</p> </blockquote> <p><em>„Du kannst das Event <strong>aber auch</strong> beim gemeinsamen Vorfahr registrieren und über den mit <code>event.target</code> ermittelten Wert prüfen, ob überhaupt ein Button betätigt wurde und nur dann den Code ausführen“</em> hörte sich für mich wirklich an wie: du kannst <strong>aber auch</strong> <em lang="en">event delegation</em> einsetzen.</p> <p>Dadurch las sich das vorige <em>„Du kannst einerseits …“</em> wie: hier nicht <em lang="en">event delegation</em>.</p> <p>Wenn das von dir nicht so beabsichtigt war, dann nichts für ungut.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711151#m1711151 Auge 2018-01-02T14:12:07Z 2018-01-02T14:12:07Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <p><em>„Du kannst das Event <strong>aber auch</strong> beim gemeinsamen Vorfahr registrieren und über den mit <code>event.target</code> ermittelten Wert prüfen, ob überhaupt ein Button betätigt wurde und nur dann den Code ausführen“</em> hörte sich für mich wirklich an wie: du kannst <strong>aber auch</strong> <em lang="en">event delegation</em> einsetzen.</p> <p>Dadurch las sich das vorige <em>„Du kannst einerseits …“</em> wie: hier nicht <em lang="en">event delegation</em>.</p> <p>Wenn das von dir nicht so beabsichtigt war, dann nichts für ungut.</p> </blockquote> <p>Mir ging es bei meinem Posting nur um die Möglichkeit, entweder einen vorhandenen Vorfahren anzusprechen oder, wenn das der Übersichtlichkeit dienlich ist, einen neuen zu erzeugen. <a href="/users/7069" class="mention registered-user" rel="noopener noreferrer">@Friedel</a> <a href="https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711109#m1711109" rel="noopener noreferrer">sprach ja an</a>, dass der gemeinsame Vorfahr „sehr viel anderes, als nur die Buttons“ enthält. Ich wollte kein Entweder-Oder konstruieren.</p> <p>Auch wenn ein zusätzliches Element nicht der reinen Lehre entsprechen mag, kann es sinnvoll sein, die Lehre Lehre sein zu lassen. Gerade in Fällen, wo ein zusätzliches Maß Übersicht eine Rolle spielt.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711183#m1711183 Friedel 2018-01-02T20:05:40Z 2018-01-02T20:05:40Z JavaScript - Problem mit addEventListener <p>Hallo, inzwischen hat der Thread offensichtlich nichts mehr mit meinem Problem zu tun.</p> <p>Mit den Beschreibungen zu event.target komme ich allesamt nicht klar. Sie haben alle gemeinsam, dass sie kein brauchbares Beispiel enthalten und außer event.target noch alles mögliche andere gleichzeitig erklären wollen. Die Beispiele auf selfhtml sind wie fast alle Beispiele im neuen Selfhtml auch so. Wenn ich etwas neues lernen will, brauche ich ein Beispiel, das <em>nur</em> diese Sache enthält.</p> <p>Nebenbei ist mir auch nicht klar, wie ihr auf die Idee kommt, dass in anklickbare Listen haben will. Bei mir sollen ausschließlich Buttons anklickbar sein.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711163#m1711163 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-02T15:34:58Z 2018-01-02T15:34:58Z JavaScript - Problem mit addEventListener <p>@@Felix Riesterer</p> <blockquote> <blockquote> <p>Bei XML (auch bei Verarbeitungs als XHTML) sähe das schon wieder anders aus.</p> </blockquote> <p>eben deshalb</p> </blockquote> <p>Ist die Auslieferung von HTML als <code>application/xhtml+xml</code> ein Thema? Macht das irgendwer?</p> <blockquote> <p>verwende ich <code class="language-javascript">o<span class="token punctuation">.</span>tagName<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^xyz$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span></code></p> </blockquote> <p>Dann würde ich statt mit regulären Ausdrücken draufzuhauen lieber <code>event.target.tagName.toUpperCase()</code> verwenden (bzw. <code>toLowerCase()</code>).</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711185#m1711185 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-02T20:11:27Z 2018-01-02T20:11:27Z JavaScript - Problem mit addEventListener <p>Hallo Friedel,</p> <blockquote> <p>Mit den Beschreibungen zu event.target komme ich allesamt nicht klar. Sie haben alle gemeinsam, dass sie kein brauchbares Beispiel enthalten und außer event.target noch alles mögliche andere gleichzeitig erklären wollen. Die Beispiele auf selfhtml sind wie fast alle Beispiele im neuen Selfhtml auch so. Wenn ich etwas neues lernen will, brauche ich ein Beispiel, das <em>nur</em> diese Sache enthält.</p> </blockquote> <p><a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711187#m1711187 Felix Riesterer http://felix-riesterer.de 2018-01-02T20:19:12Z 2018-01-02T20:19:12Z JavaScript - Problem mit addEventListener <p>Lieber Friedel,</p> <blockquote> <p>Hallo, inzwischen hat der Thread offensichtlich nichts mehr mit meinem Problem zu tun.</p> </blockquote> <p>das ist die hier nicht unübliche Threaddrift. Davon darfst Du Dich nicht verunsichern lassen.</p> <blockquote> <p>Mit den Beschreibungen zu event.target komme ich allesamt nicht klar. Sie haben alle gemeinsam, dass sie kein brauchbares Beispiel enthalten und außer event.target noch alles mögliche andere gleichzeitig erklären wollen.</p> </blockquote> <p>Nimm Dir Zeit! Die Sache ist nun einmal nicht so unkompliziert. Da braucht es Grundlagen- und Hintergrundwissen, um zu verstehen, was man da tut. Und das braucht Zeit.</p> <blockquote> <p>Die Beispiele auf selfhtml sind wie fast alle Beispiele im neuen Selfhtml auch so. Wenn ich etwas neues lernen will, brauche ich ein Beispiel, das <em>nur</em> diese Sache enthält.</p> </blockquote> <p>Wie soll das denn bitteschön gehen? Die Dinge hängen doch alle ganz eng miteinander zusammen! Du willst einen Event-Listener benutzen, willst aber vom Event-Objekt nichts wissen? Das passt nicht zusammen!</p> <blockquote> <p>Nebenbei ist mir auch nicht klar, wie ihr auf die Idee kommt, dass in anklickbare Listen haben will.</p> </blockquote> <p>Mea culpa. Ich war bei <code>ordnerauf</code> davon ausgegangen, dass Du eine Art Dateimanager darstellen willst, bei dem man den Ordnerinhalt durch Aufklappen (ordnerauf) sichtbar schalten will. Und ein Datei-Listing ist eben eine Liste.</p> <blockquote> <p>Bei mir sollen ausschließlich Buttons anklickbar sein.</p> </blockquote> <p>Ist ja OK. Und zu Deinem konkreten Problem hatte ich Dir auch eine konkrete Antwort geschrieben, mit Erklärung, was bei Dir falsch gelaufen ist und wie es richtig gegangen wäre. Eine Reaktion von Dir auf mein Posting habe ich dagegen nirgends gesehen...</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711191#m1711191 JürgenB https://www.j-berkemeier.de 2018-01-02T20:31:33Z 2018-01-02T20:31:33Z JavaScript - Problem mit addEventListener <p>Hallo,</p> <blockquote> <p>Nein, das Beispiel auf den verlinkten Wikiseite ist leider nicht selbsterklärend und ich verstehe es auch nicht. Es wäre schön, wenn in solchen Beispielen nur eine Sache gezeigt würde. Die Beispiele sind immer sehr komplex. Ich kann damit nicht anfangen.</p> </blockquote> <p>meinst du diese Seite <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target</a>?</p> <blockquote> <p>Edit: Offensichtlich ist es in diesem Forum nicht möglich, dass meine Antwort im Threadbaum dort erscheint, wo sie hin gehört. Dies ist eine Antwort auf den Beitrag von Auge von 02.01.2018 10:43. Dass sie ganz wo anders steht, halte ich für einen gravierenden Bug im Forum.</p> </blockquote> <p>die Antwort ist genau da, wo sie hin gehört. Nur hat Christian schon vor dir geantwortet.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711196#m1711196 Auge 2018-01-03T07:35:58Z 2018-01-03T07:35:58Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <p>Nein, das Beispiel auf den verlinkten Wikiseite ist leider nicht selbsterklärend und ich verstehe es auch nicht.</p> </blockquote> <p>Aha, das ist doch mal eine Ansage.</p> <blockquote> <p>Es wäre schön, wenn in solchen Beispielen nur eine Sache gezeigt würde. Die Beispiele sind immer sehr komplex. Ich kann damit nicht anfangen.</p> </blockquote> <p>Das Beispiel auf der von mir verlinkten Wikiseite zeigt genau zwei Vorgänge (und damit <em><strong>einen</strong> zu wenig</em>).</p> <ol> <li>Registrierung von Event-Listenern in der Funktion <code>init</code>.</li> <li>Die Funktion <code>findeAuslöser</code>, die bei einem Event ausgeführt werden soll. Dort drin wird mit <code>event.target</code> der Name des Elements ermittelt, mit dem der Event ausgelöst wurde.</li> </ol> <blockquote> <p>Ich habe lange mit event.target rumprobiert, aber ich erreiche damit nichts brauchbares.</p> </blockquote> <p>Zeige bitte, was du probiert hast und beschreibe, was nicht funktioniert. Grundsätzlich funktioniert das Beispiel im Wiki. Der einzige Schritt, der diesem Beispiel fehlt, ist der Code zur Ausführung von <code>init</code>. Man sollte zwar annehmen, dass dieser gedankliche Sprung jemandem, der programmieren will, möglich ist, Anfängern mag sich das aber nicht erschließen.</p> <p>Woran es bei dir tatsächlich scheitert, wird sich ohne deinen konkreten Code aber nicht ermitteln lassen.</p> <p><a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a>: Das Beispiel zeigt tatsächlich zu wenig, statt zu viel. Ich vermute, dass dies auch der Grund ist, warum das Frickl-Beispiel dieses Artikels bei mir (Win10, Firefox 57) nicht ausgeführt wird. Ich kann dort hovern und klicken, wie mir lustig ist, ohne, dass mir irgendein Elementname angezeigt wird.</p> <blockquote> <p>Edit: Offensichtlich ist es in diesem Forum nicht möglich, dass meine Antwort im Threadbaum dort erscheint, wo sie hin gehört. Dies ist eine Antwort auf den Beitrag von Auge von 02.01.2018 10:43.</p> </blockquote> <p>Deine Antwort erscheint, wie schon JürgenB schrieb, genau dort, wo sie hingehört.</p> <blockquote> <p>Dass sie ganz wo anders steht, halte ich für einen gravierenden Bug im Forum.</p> </blockquote> <p>Ich sehe keinen Bug.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711194#m1711194 Friedel 2018-01-03T00:32:32Z 2018-01-03T00:32:32Z JavaScript - Problem mit addEventListener <blockquote> <p>Und zu Deinem konkreten Problem hatte ich Dir auch eine konkrete Antwort geschrieben, mit Erklärung, was bei Dir falsch gelaufen ist und wie es richtig gegangen wäre. Eine Reaktion von Dir auf mein Posting habe ich dagegen nirgends gesehen…</p> </blockquote> <p>Und wie finde ich diese konkrete Antwort? Kannst du mir Datum und Uhrzeit dieser Antwort nennen, oder einen Suchstring, damit ich mit Strg+f danach suchen kann.</p> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711199#m1711199 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-03T08:02:50Z 2018-01-03T08:02:50Z JavaScript - Problem mit addEventListener <p>Hallo Friedel,</p> <blockquote> <p>Kannst du mir Datum und Uhrzeit dieser Antwort nennen, oder einen Suchstring, damit ich mit Strg+f danach suchen kann.</p> </blockquote> <p>Nein, schau dir den Threadbaum an.</p> <p><a href="/images/6ebaebc4-1dae-4752-9e6d-e07056d01646.png" rel="noopener noreferrer"><img src="/images/6ebaebc4-1dae-4752-9e6d-e07056d01646.png?size=medium" alt="Screenshot Threadbaum" loading="lazy"></a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711209#m1711209 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-03T10:32:29Z 2018-01-03T10:32:29Z JavaScript - Problem mit addEventListener <p>Hallo Auge,</p> <blockquote> <p><a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a>: Das Beispiel zeigt tatsächlich zu wenig, statt zu viel. Ich vermute, dass dies auch der Grund ist, warum das Frickl-Beispiel dieses Artikels bei mir (Win10, Firefox 57) nicht ausgeführt wird. Ich kann dort hovern und klicken, wie mir lustig ist, ohne, dass mir irgendein Elementname angezeigt wird.</p> </blockquote> <p>Die JavaScript-Beispiele funktionieren im Frickl alle nicht zuverlässig. Da müsste mal ein JS-Experte wie <a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a> (der ja auch das Frickl gebaut hat) drüberschauen. Selbst bei wirklich einfachen Sachen waren Änderungen notwendig. Beispiel:</p> <p>alt</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">Ausgeben</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> zahl <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token constant">E</span><span class="token punctuation">;</span> <span class="token keyword">var</span> elem <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'Ausgabe'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> elem<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">'Die Eulersche Konstante ist: '</span><span class="token operator">+</span> zahl<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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>neu</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">async</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</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">ausgeben</span><span class="token punctuation">(</span><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">'ausgabe'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token string">'Der Wert der Konstanten beträgt: '</span> <span class="token operator">+</span> Math<span class="token punctuation">.</span><span class="token constant">E</span><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">'start'</span><span class="token punctuation">)</span><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> ausgeben<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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711213#m1711213 Auge 2018-01-03T10:56:43Z 2018-01-03T10:56:43Z JavaScript - Problem mit addEventListener <p>Hallo</p> <blockquote> <p>Die JavaScript-Beispiele funktionieren im Frickl alle nicht zuverlässig.</p> </blockquote> <p>Aha, da ich mich mit JS selten auseinandersetze, war mir halt nur dieses Beispiel untergekommen.</p> <blockquote> <p>Da müsste mal ein JS-Experte wie <a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a> (der ja auch das Frickl gebaut hat) drüberschauen.</p> </blockquote> <p>Ja, da muss ein Spezialexperte™️ ran. Das sind Bereiche (JS <em>und</em> Frickl), in denen ich mich definitiv nicht genug auskenne.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711223#m1711223 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-03T12:23:08Z 2018-01-03T12:23:08Z JavaScript - Problem mit addEventListener <p>Hallo Auge,</p> <blockquote> <p>Ja, da muss ein Spezialexperte™️ ran. Das sind Bereiche (JS <em>und</em> Frickl), in denen ich mich definitiv nicht genug auskenne.</p> </blockquote> <p>Ich habs mal so gemacht: <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target</a> Da besteht sicher immer noch Verbesserungspotenzial.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711225#m1711225 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-01-03T12:40:18Z 2018-01-03T12:40:18Z JavaScript - Problem mit addEventListener <p>@@Matthias Apsel</p> <blockquote> <p>Ich habs mal so gemacht: <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/target</a> Da besteht sicher immer noch Verbesserungspotenzial.</p> </blockquote> <p>Ja, z.B. bei <code class="language-js bad"><span class="token keyword">var</span> seite <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p> <p>Es macht wenig Sinn, nach der Nadel im Heuhaufen zu suchen, wenn man sie schon<br> in der Hand hat: <code class="language-js good"><span class="token keyword">var</span> seite <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span></code></p> <p>Man kann sich die Zuweisung an <code>seite</code> auch sparen und gleich schreiben:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mouseover'</span><span class="token punctuation">,</span> findeAuslöser<span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>documentElement<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> findeAuslöser<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Jetzt, wo die Eventhandler am <code>html</code>-Element hängen, passt <em>„Auch wenn der Eventhandler im body notiert ist“</em> auch nicht mehr so richtig.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2018/jan/2/javascript-problem-mit-addeventlistener/1711228#m1711228 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2018-01-03T12:57:13Z 2018-01-03T12:57:13Z JavaScript - Problem mit addEventListener <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Es macht wenig Sinn, nach der Nadel im Heuhaufen zu suchen, wenn man sie schon<br> in der Hand hat: <code class="language-js good"><span class="token keyword">var</span> seite <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span></code></p> </blockquote> <p>Stimmt.</p> <blockquote> <p>Man kann sich die Zuweisung an <code>seite</code> auch sparen und gleich schreiben:</p> <pre><code class="block language-javascript">document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'mouseover'</span><span class="token punctuation">,</span> findeAuslöser<span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>documentElement<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> findeAuslöser<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Stimmt auch, aber ich habe die Zuweisung an <code>seite</code> mal gelassen.</p> <blockquote> <p>Jetzt, wo die Eventhandler am <code>html</code>-Element hängen, passt <em>„Auch wenn der Eventhandler im body notiert ist“</em> auch nicht mehr so richtig.</p> </blockquote> <p>Geändert.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div>