Path: csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!news.albasani.net!.POSTED!not-for-mail
From: Stefan Weiss <krewecherl@gmail.com>
Newsgroups: comp.lang.javascript
Subject: Re: Clone node with events
Date: Thu, 10 Jan 2013 17:15:44 +0100
Organization: albasani.net
Lines: 27
Message-ID: <kcmpfg$pli$1@news.albasani.net>
References: <kcm8um$8pi$1@speranza.aioe.org>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 7bit
X-Trace: news.albasani.net hhxmPN1cDyjHfn9gk//73oemA298qq7Co+UsFthTiZsim2nJfktOoRBpoezqqOZtrJh9HM4M1UXan2IZ2zK5NaAiZ7vI2BdLg7A/qne9gDoy9j+zYPGogLHJgkLAD0pk
NNTP-Posting-Date: Thu, 10 Jan 2013 16:15:44 +0000 (UTC)
Injection-Info: news.albasani.net; logging-data="HL3LCTXyU15vSi4q3ELZOFYbzC61trYLb4e1nqGinwfZe6l+nWTFss5SQQ0fdzwl8cdM4/Mfw5CuKAaZL/mnIpSecrOFgYhXEag33x511/m173a9AZG/TWGTNq91b1Vt"; mail-complaints-to="abuse@albasani.net"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:17.0) Gecko/17.0 Thunderbird/17.0
In-Reply-To: <kcm8um$8pi$1@speranza.aioe.org>
Cancel-Lock: sha1:/b3jBahc9FhA2eLkDxwlKyFsgCQ=
Xref: csiph.com comp.lang.javascript:18051

On 2013-01-10 12:33, Cezary Tomczyk wrote:
> Any idea how to in an efficient and proper way clone node with events?

That doesn't seem like a good idea in the first place (for the reason
Scott mentioned), but maybe there's a better way. When you have a number
of elements that should react in a similar way to an event, consider
using event delegation instead of separate listeners for each element.

Simply put, that means attaching one listener to a common parent
element, and resolving the event target from there. This works
especially well for click events; other event types (like mouseover,
mouseout) can be a little more tricky. Some events do not bubble at all
(focus, blur, change, etc).

If you can't use event delegation, use a wrapper function to
create/clone the element and attach the listeners at the same time:

   function handleFocus (evt) {}

   function makeInput (node) {
       var input = node ? node.cloneNode()
                        : document.createElement("input");
       input.addEventListener("focus", handleFocus);
       return input;
   }

- stefan