Issue #187 (Overwriting events, JS Libs, JS Utils, Bundlers)
I posed the problem on Twitter and Phil Walton was kind enough to explain. This was definitely something that I felt like I should have been able to understand because I'm sure I've read something about this in the past. Anyhow, here's a quick summary of the problem and the explanation:
- When using an inline onclick handler on a button, I'm able to append a message to document.body multiple times using innerHTML.
- When using addEventListener or btn.onclick to attach the event, the button would only add the message once (subsequent clicks did nothing).
- The line that uses innerHTML+= overwrites the event handlers because it destroys and recreates the DOM nodes.
- Declaring the event handler inline apparently avoids this problem (I'm still not clear on the logic of it in this case, because to me it appears to be doing the same thing).
The same basic problem is discussed in this Stack Overflow thread
where it's suggested to use appendChild()
instead. If you do a search on this subject, you'll notice some really old articles that discuss the problem, as well as some similar Q&A threads.
In summary, if you use innerHTML
to add content to an element, remember that the events attached to those elements will not be reattached, even when you're appending to existing content.
Now on to this week's tools!
Now at version 3.x. Complete routing library with a simple API and powerful features like lazy code loading, dynamic route matching, and more.
A powerful ground breaking HTML5 game creator designed specifically for 2D games. It allows anyone to build games — no coding required.
Create modular applications using observable streams. Manage async behavior, greater separation of concerns, better component decoupling, etc.
Animation engine with top performance, memory efficiency, and modular code to help you create great custom animations.
A minimalistic framework for server-rendered React applications.
Empowers HTML5 developers to make great multiplayer games. Provides the skeleton of your multiplayer game available online, testable with your friends, and connected in realtime after just minutes of configuration.
A carousel plugin for React, based on the Siema carousel.
A small, dependency-free library for loading images progressively.
Merges pictures and QR codes for artistic QR codes. Yes, you read that correctly.
Tiny 200-byte functional event emitter / pubsub, that works in IE9+.
Now at version 3.x. A lightweight (1.2Kb), dependency-free flexible script to create accessible dialog windows.
A modern payment platform for in-app payments, based on Stripe, with a simple API.
Bundlers, Module Loaders, etc.
The popular module bundler is now at version 2.x.
An ESLint plugin to check for browser support for APIs used, based on caniuse and kangax compat table data.
A bundler/module loader that combines the power of webpack, JSPM and SystemJS.
A Tweet for Thought
Does lack of experience with large projects give you less authority with specific types of coding advice? According to Thierry Koblentz, yes.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
You might enjoy Libraries.io, "The Open Source Discovery Service".
Thanks to all for subscribing and reading!